/* Lyra — "Pressing Plant" design tokens + base.
   Two-color print: manila/kraft paper + warm ink + one deep spruce accent.
   Tokens live on :root; both themes get equal care. Style components through
   tokens only — never inside a media query. */

:root {
  /* Day pressing (light) */
  --paper:      #E7DFCC;
  --paper-2:    #DED5BE;
  --ink:        #1B1A17;
  --graphite:   #726D5F;
  --rule:       rgba(27, 26, 23, 0.16);
  --rule-2:     rgba(27, 26, 23, 0.30);
  --accent:     #1F5138;
  --accent-ink: #F3EEDF;
  --live:       #9A6B1E; /* semantic: work in progress */
  --alert:      #99392B; /* semantic: needs attention */

  --serif: var(--font-fraunces), "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --mono:  ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;

  --shell: 900px;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Night pressing (dark) — vinyl-black ground */
    --paper:      #14130F;
    --paper-2:    #1D1B16;
    --ink:        #E9E1CD;
    --graphite:   #938C7B;
    --rule:       rgba(233, 225, 205, 0.16);
    --rule-2:     rgba(233, 225, 205, 0.28);
    --accent:     #5BB487;
    --accent-ink: #10120F;
    --live:       #D2A24E;
    --alert:      #D8695A;
  }
}

/* Explicit in-app toggle wins over the OS preference, in both directions. */
:root[data-theme="light"] {
  --paper: #E7DFCC; --paper-2: #DED5BE; --ink: #1B1A17; --graphite: #726D5F;
  --rule: rgba(27,26,23,.16); --rule-2: rgba(27,26,23,.30);
  --accent: #1F5138; --accent-ink: #F3EEDF; --live: #9A6B1E; --alert: #99392B;
}
:root[data-theme="dark"] {
  --paper: #14130F; --paper-2: #1D1B16; --ink: #E9E1CD; --graphite: #938C7B;
  --rule: rgba(233,225,205,.16); --rule-2: rgba(233,225,205,.28);
  --accent: #5BB487; --accent-ink: #10120F; --live: #D2A24E; --alert: #D8695A;
}

* { box-sizing: border-box; }

html { color-scheme: light dark; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  /* faint paper grain */
  background-image: radial-gradient(rgba(27, 26, 23, 0.025) 1px, transparent 1px);
  background-size: 3px 3px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap { max-width: var(--shell); margin: 0 auto; padding: 0 28px 72px; }

a { color: var(--accent); text-underline-offset: 3px; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}