/* ============================================================
   Recto — the Ink token layer. One source of truth for both
   stylesheets: landing.css dresses the homepage, app.css dresses
   everything behind it, and neither carries a palette of its own.

   Navy ground, one amber signal. Hairlines and background value
   do all the separating — there is no border radius and no
   shadow anywhere in this design, on purpose.

   Light sits on bare :root so a page with no preference and no
   stored choice still has a full palette. The system preference
   swaps it, and an explicit data-theme wins over both.
   ============================================================ */

:root {
  /* ---- constant across both modes ---- */

  /* The amber is a fill colour. It carries dark text, never light. */
  --accent:      #FFB000;
  --accent-2:    #E09A00;   /* the same amber, pressed */
  --accent-ink:  #231803;   /* the only text that goes on amber */

  /* A scan is never theme-tinted: the stage stays white in the
     dark mode too, because a document does not have a dark mode. */
  --stage:       #FFFFFF;
  --stage-ink:   #15161A;
  --box-rule:    #cfd1d8;
  --box-hover:   #FFB00033;
  --box-low:     #FFB00014;

  --font-display: "Instrument Sans", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;
  --font-ui:      "Instrument Sans", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, "Cascadia Mono", monospace;

  --gutter:  clamp(20px, 4vw, 56px);
  --measure: 1240px;
  --tick:    .18s cubic-bezier(.32,.72,0,1);
  --shadow:  none;

  /* ---- light ---- */
  --bg:          #F6F7FB;
  --panel:       #EEF0F7;
  --rule:        #D9DDEC;
  --rule-2:      #E8EBF4;
  --ink:         #0F1430;
  --strong:      #0B1028;
  --body:        #3C4468;
  --dim:         #5B6389;
  --head:        #4A5378;
  --btn:         #C3C9DE;
  /* Amber as *text* fails contrast on a light ground, so every
     place the accent is set in type reaches for this instead. */
  --accent-text: #8A5A00;
  --accent-wash: #FFF6E3;
  --ok:          #1C7A5E;
  --warn:        #8A5A00;
  --cta-bg:      #0F1430;
  --cta-ink:     #F6F7FB;
  --tab-bg:      #0F1430;
  --tab-ink:     #F6F7FB;
  --code-bg:     #0B1028;
  --code-ink:    #E7EAF6;
}

/* The dark values, written once and referenced twice: once for the
   reader who never touched the switch, once for the reader who did. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #0F1430;
    --panel:       #0B1028;
    --rule:        #222A4E;
    --rule-2:      #19203E;
    --ink:         #E7EAF6;
    --strong:      #FFFFFF;
    --body:        #BEC5E0;
    --dim:         #949CC4;
    --head:        #A9B1D2;
    --btn:         #2E3760;
    --accent-text: #FFB000;
    --accent-wash: #241B06;
    --ok:          #5FD3A8;
    --warn:        #D98A00;
    --cta-bg:      #E7EAF6;
    --cta-ink:     #0F1430;
    --tab-bg:      #E7EAF6;
    --tab-ink:     #0F1430;
    --code-bg:     #080C20;
    --code-ink:    #E7EAF6;
  }
}

:root[data-theme="dark"] {
  --bg:          #0F1430;
  --panel:       #0B1028;
  --rule:        #222A4E;
  --rule-2:      #19203E;
  --ink:         #E7EAF6;
  --strong:      #FFFFFF;
  --body:        #BEC5E0;
  --dim:         #949CC4;
  --head:        #A9B1D2;
  --btn:         #2E3760;
  --accent-text: #FFB000;
  --accent-wash: #241B06;
  --ok:          #5FD3A8;
  --warn:        #D98A00;
  --cta-bg:      #E7EAF6;
  --cta-ink:     #0F1430;
  --tab-bg:      #E7EAF6;
  --tab-ink:     #0F1430;
  --code-bg:     #080C20;
  --code-ink:    #E7EAF6;
}

/* ------------------------------------------------------------
   The light/dark switch. It lives here rather than in either
   stylesheet because it sits in the header of every page, and two
   copies of it would drift.
   ------------------------------------------------------------ */
.switch { display: flex; border: 1px solid var(--rule); }
.switch button {
  padding: 5px 10px;
  border: 0;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  background: transparent;
  color: var(--dim);
}
.switch button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }