/* ============================================================================
   Feed the Camera — design tokens
   ----------------------------------------------------------------------------
   Two grounds: PAPER (light) and REEL (dark).

   The values are the ones already in use in the Control Room artifact, where
   this palette was worked out. They are namespaced --ftc-* here because this is
   now a design system rather than one page's stylesheet, and because an
   unnamespaced --ink or --gold will collide the first time this sits beside
   anything else. The artifact's bare names map one-to-one: --paper is
   --ftc-paper, --ink is --ftc-ink, and so on.

   Light is defined on bare :root so it is the floor. Dark is redefined twice —
   once under prefers-color-scheme for the system default, once under
   [data-theme="dark"] so an explicit toggle wins in both directions. Never
   give a colour its only definition inside one of those blocks.
   ========================================================================== */

:root {
  /* ---- grounds ------------------------------------------------------ */
  --ftc-paper:      #ede3d3;   /* the page itself */
  --ftc-sheet:      #fdfaf3;   /* a panel raised off it */
  --ftc-sunk:       #f4eddf;   /* an input, or a well */

  /* ---- ink ---------------------------------------------------------- */
  --ftc-ink:        #121212;   /* body and display */
  --ftc-ink-2:      #4a463f;   /* secondary prose */
  --ftc-ink-3:      #7d776c;   /* labels, captions, the quiet tier */

  /* ---- rules -------------------------------------------------------- */
  --ftc-rule:       #ddd2bd;   /* panel borders, section divisions */
  --ftc-rule-2:     #e7ddca;   /* the lighter internal rule */
  --ftc-axis:       #c9bda6;   /* chart axes, dashed drop zones */
  --ftc-edge:       rgba(18, 18, 18, .12);
  --ftc-wash:       rgba(18, 18, 18, .035);

  /* ---- accent ------------------------------------------------------- */
  /* Gold is the single accent. --ftc-gold is the RULE colour; --ftc-gold-text
     is the darkened variant for text, because gold on paper fails contrast at
     body sizes. Use the right one — they are not interchangeable. */
  --ftc-gold:       #f2ab1a;
  --ftc-gold-text:  #8a5f06;
  --ftc-amber:      #f5b651;
  --ftc-band:       rgba(154, 106, 8, .07);

  /* ---- status ------------------------------------------------------- */
  --ftc-ok:         #2c6642;
  --ftc-warn:       #7e5310;
  --ftc-urgent:     #9c2a1c;

  /* ---- data series (charts, timelines) ------------------------------ */
  --ftc-s1:         #9a6a08;
  --ftc-s2:         #2a6ea8;
  --ftc-track:      #e3d9c4;

  /* ---- type --------------------------------------------------------- */
  --ftc-display:  "Bodoni Moda", Georgia, serif;
  --ftc-read:     "EB Garamond", Georgia, "Times New Roman", serif;
  --ftc-caps:     "Jost", system-ui, -apple-system, sans-serif;
  --ftc-data:     "Courier Prime", ui-monospace, Menlo, monospace;

  /* ---- metrics ------------------------------------------------------ */
  --ftc-shell:    1100px;                     /* page measure */
  --ftc-gutter:   clamp(20px, 5vw, 56px);
  --ftc-measure:  64ch;                       /* reading measure */

  color-scheme: light;
}

/* REEL — the dark ground. Not an inversion: the golds hold, the inks and
   grounds swap roles, and --ftc-gold-text stops being darkened because on a
   dark ground the undarkened gold is the readable one. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ftc-paper:     #111111;
    --ftc-sheet:     #1a1a18;
    --ftc-sunk:      #232320;
    --ftc-ink:       #fdfaf3;
    --ftc-ink-2:     #bdb5a5;
    --ftc-ink-3:     #8b8478;
    --ftc-rule:      #2f2e2a;
    --ftc-rule-2:    #262521;
    --ftc-axis:      #3d3b35;
    --ftc-edge:      rgba(253, 250, 243, .12);
    --ftc-wash:      rgba(253, 250, 243, .04);
    --ftc-gold:      #f2ab1a;
    --ftc-gold-text: #f2ab1a;
    --ftc-amber:     #f3d06b;
    --ftc-band:      rgba(189, 132, 16, .12);
    --ftc-ok:        #7fc095;
    --ftc-warn:      #d9ac60;
    --ftc-urgent:    #e98974;
    --ftc-s1:        #bd8410;
    --ftc-s2:        #4a90c4;
    --ftc-track:     #2f2e2a;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --ftc-paper:     #111111;
  --ftc-sheet:     #1a1a18;
  --ftc-sunk:      #232320;
  --ftc-ink:       #fdfaf3;
  --ftc-ink-2:     #bdb5a5;
  --ftc-ink-3:     #8b8478;
  --ftc-rule:      #2f2e2a;
  --ftc-rule-2:    #262521;
  --ftc-axis:      #3d3b35;
  --ftc-edge:      rgba(253, 250, 243, .12);
  --ftc-wash:      rgba(253, 250, 243, .04);
  --ftc-gold:      #f2ab1a;
  --ftc-gold-text: #f2ab1a;
  --ftc-amber:     #f3d06b;
  --ftc-band:      rgba(189, 132, 16, .12);
  --ftc-ok:        #7fc095;
  --ftc-warn:      #d9ac60;
  --ftc-urgent:    #e98974;
  --ftc-s1:        #bd8410;
  --ftc-s2:        #4a90c4;
  --ftc-track:     #2f2e2a;
  color-scheme: dark;
}