/* ============================================================
   F2 Technologies — Color & Theme tokens  ·  v1.1
   Faithful to the canonical token file (uploads/f2-tokens.css).
   Three layers: PRIMITIVE → SEMANTIC (flips per theme) → COMPONENT.

   Theming:
     :root                → dark (brand default — matches the manual)
     [data-theme="light"] → light (now a canonical, fully-specified theme)
     [data-theme="dark"]  → explicit dark
     [data-theme="auto"]  → follows the OS via prefers-color-scheme

   Font / radius / motion / spacing primitives live in their sibling
   token files (typography.css, effects.css, spacing.css); the component
   layer below references them and resolves cross-file at runtime.

   Accent note: amber as a FILL (ink text on top) passes AAA on both
   themes, but amber as TEXT on a light surface can't pass WCAG — so the
   accent splits into --f2-accent (fill) and --f2-accent-text (foreground),
   and only the text role darkens to amber-deep on light.
   ============================================================ */

:root {
  /* ========================================================
     LAYER 1 — PRIMITIVES (raw values, never theme-dependent)
     ======================================================== */

  /* --- Core brand --- */
  --f2-ink:            #101216; /* primary dark surface          */
  --f2-bone:           #ECEAE2; /* primary text / light surface  */
  --f2-amber:          #E59A3C; /* Signal Amber — the only accent */

  /* --- Ink ramp (dark surfaces + dark text, derived from ink) --- */
  --f2-ink-900:        #0B0D11; /* deepest / sunken              */
  --f2-ink-800:        #101216; /* base dark surface             */
  --f2-ink-700:        #15181E; /* raised surface                */
  --f2-ink-600:        #1B1F26; /* card surface                  */
  --f2-ink-500:        #2A2F38; /* hairline-strong / secondary text on light */
  --f2-ink-400:        #3C414B; /* disabled edge / muted text on light */

  /* --- Gray ramp (text / labels) --- */
  --f2-gray-500:       #6E727C; /* faint labels                  */
  --f2-gray-400:       #8B8F99; /* secondary text on dark        */
  --f2-gray-300:       #A6A9B2; /* body on dark                  */
  --f2-gray-200:       #C7C8CE; /* high-emphasis secondary       */

  /* --- Paper ramp (light surfaces, derived from bone) — v1.1 --- */
  --f2-paper-100:      #F6F5F0; /* raised / card on light        */
  --f2-paper-200:      #ECEAE2; /* base light surface (= bone)   */
  --f2-paper-300:      #DEDBD0; /* sunken / subtle fill on light */
  --f2-paper-400:      #CFCBBE; /* hairline-strong on light      */
  --f2-paper-500:      #B7B2A3; /* faint / disabled edge on light */

  /* --- Amber tints --- */
  --f2-amber-soft:     #1B1610; /* amber-tinted surface on dark  */
  --f2-amber-wash:     #FBF1E2; /* amber-tinted surface on light — v1.1 */
  --f2-amber-press:    #C57E2E; /* amber pressed / fill hover    */
  --f2-amber-deep:     #9A5A14; /* accent TEXT on light (AA 4.53:1) — v1.1 */

  /* --- Status (flat, restrained — shared across themes) --- */
  --f2-success:        #4FA873;
  --f2-warning:        #E0B341;
  --f2-error:          #D85C57;

  /* --- Hairline primitives --- */
  --f2-line:               rgba(236, 234, 226, 0.09); /* on dark        */
  --f2-line-strong:        rgba(236, 234, 226, 0.16); /* on dark        */
  --f2-line-ink:           rgba(16, 18, 22, 0.10);    /* on light — v1.1 */
  --f2-line-ink-strong:    rgba(16, 18, 22, 0.18);    /* on light — v1.1 */
  --f2-accent-line:        rgba(229, 154, 60, 0.35);  /* amber hairline */

  /* ========================================================
     LAYER 2 — SEMANTIC (purpose aliases · DARK is the default)
     ======================================================== */

  /* Surfaces */
  --f2-surface:          var(--f2-ink-800);    /* page background    */
  --f2-surface-raised:   var(--f2-ink-700);    /* panels, inputs     */
  --f2-surface-card:     var(--f2-ink-600);    /* cards              */
  --f2-surface-sunken:   var(--f2-ink-900);    /* wells, code blocks */
  --f2-surface-accent:   var(--f2-amber-soft); /* amber-tinted fill  */

  /* Text (dark · contrast on #101216: 15.6 / 8.0 / 5.8 / 3.9) */
  --f2-text:             var(--f2-bone);     /* primary           */
  --f2-text-secondary:   var(--f2-gray-300); /* body / secondary  */
  --f2-text-muted:       var(--f2-gray-400); /* muted / labels    */
  --f2-text-faint:       var(--f2-gray-500); /* faint / disabled  */
  --f2-text-on-accent:   var(--f2-ink);      /* text on amber fill */

  /* Accent — fill vs text are separate roles (see header note) */
  --f2-accent:           var(--f2-amber);       /* FILL: button bg, node, chip */
  --f2-accent-hover:     var(--f2-amber-press); /* fill hover / pressed        */
  --f2-accent-text:      var(--f2-amber);       /* FOREGROUND: links, icons, focus ring */
  --f2-accent-border:    var(--f2-accent-line); /* amber hairline              */

  /* Borders */
  --f2-border:           var(--f2-line);
  --f2-border-strong:    var(--f2-line-strong);
}

/* ============================================================
   LAYER 3 — COMPONENT (built on semantics). Declared on :root AND
   every [data-theme] scope so var() re-resolves against that scope —
   this is what makes a <div data-theme="light"> inside a dark page
   theme correctly (scoped theming), not just :root.
   ============================================================ */
:root,
[data-theme] {
  /* Page */
  --f2-page-bg:          var(--f2-surface);
  --f2-page-fg:          var(--f2-text);

  /* Link / inline accent */
  --f2-link:             var(--f2-accent-text);
  --f2-link-hover:       var(--f2-accent-hover);

  /* Button — primary (amber fill, ink label) */
  --f2-btn-bg:           var(--f2-accent);
  --f2-btn-fg:           var(--f2-text-on-accent);
  --f2-btn-bg-hover:     var(--f2-accent-hover);
  --f2-btn-bg-active:    var(--f2-accent-hover);
  --f2-btn-bg-disabled:  var(--f2-surface-raised);
  --f2-btn-fg-disabled:  var(--f2-text-faint);
  --f2-btn-radius:       var(--f2-radius-control);
  --f2-btn-pad-y:        10px;
  --f2-btn-pad-x:        18px;

  /* Button — secondary (neutral outline) */
  --f2-btn2-bg:          transparent;
  --f2-btn2-fg:          var(--f2-text);
  --f2-btn2-border:      var(--f2-border-strong);
  --f2-btn2-bg-hover:    var(--f2-surface-raised);

  /* Card */
  --f2-card-bg:          var(--f2-surface-card);
  --f2-card-border:      var(--f2-border);
  --f2-card-radius:      var(--f2-radius-md);
  --f2-card-pad:         20px;

  /* Input */
  --f2-input-bg:         var(--f2-surface-raised);
  --f2-input-fg:         var(--f2-text);
  --f2-input-placeholder: var(--f2-text-muted);
  --f2-input-border:     var(--f2-border-strong);
  --f2-input-focus-ring: var(--f2-accent-text);
  --f2-input-radius:     var(--f2-radius-control);
  --f2-input-pad-y:      10px;
  --f2-input-pad-x:      14px;

  /* Divider */
  --f2-divider:          var(--f2-border);

  /* --- Back-compat aliases (older code paths; flip with theme) --- */
  --f2-surface-overlay:  var(--f2-surface-card);
  --f2-accent-contrast:  var(--f2-text-on-accent);
  --f2-border-subtle:    var(--f2-border);
  --f2-focus:            var(--f2-accent-text);
}

/* ============================================================
   LIGHT THEME — remap the SEMANTIC layer only.
   Hierarchy inverts: darker = more emphasis on a bone surface.
   ============================================================ */
:root[data-theme="light"],
[data-theme="light"] {
  --f2-surface:          var(--f2-paper-200); /* bone */
  --f2-surface-raised:   var(--f2-paper-100);
  --f2-surface-card:     var(--f2-paper-100);
  --f2-surface-sunken:   var(--f2-paper-300);
  --f2-surface-accent:   var(--f2-amber-wash);

  --f2-text:             var(--f2-ink);      /* on bone: 15.6 / 11.2 / 8.5 / 4.0 */
  --f2-text-secondary:   var(--f2-ink-500);
  --f2-text-muted:       var(--f2-ink-400);
  --f2-text-faint:       var(--f2-gray-500);
  --f2-text-on-accent:   var(--f2-ink);

  --f2-accent:           var(--f2-amber);      /* FILL stays Signal Amber */
  --f2-accent-hover:     var(--f2-amber-press);
  --f2-accent-text:      var(--f2-amber-deep); /* TEXT darkens for AA on bone */
  --f2-accent-border:    var(--f2-accent-line);

  --f2-border:           var(--f2-line-ink);
  --f2-border-strong:    var(--f2-line-ink-strong);
}

/* Explicit dark (same as :root default) — for symmetry with light */
:root[data-theme="dark"],
[data-theme="dark"] {
  --f2-surface:          var(--f2-ink-800);
  --f2-surface-raised:   var(--f2-ink-700);
  --f2-surface-card:     var(--f2-ink-600);
  --f2-surface-sunken:   var(--f2-ink-900);
  --f2-surface-accent:   var(--f2-amber-soft);

  --f2-text:             var(--f2-bone);
  --f2-text-secondary:   var(--f2-gray-300);
  --f2-text-muted:       var(--f2-gray-400);
  --f2-text-faint:       var(--f2-gray-500);
  --f2-text-on-accent:   var(--f2-ink);

  --f2-accent:           var(--f2-amber);
  --f2-accent-hover:     var(--f2-amber-press);
  --f2-accent-text:      var(--f2-amber);
  --f2-accent-border:    var(--f2-accent-line);

  --f2-border:           var(--f2-line);
  --f2-border-strong:    var(--f2-line-strong);
}

/* Opt-in OS following — only when explicitly set to "auto".
   The brand manual stays dark; nothing here touches it. */
@media (prefers-color-scheme: light) {
  :root[data-theme="auto"],
  [data-theme="auto"] {
    --f2-surface:          var(--f2-paper-200);
    --f2-surface-raised:   var(--f2-paper-100);
    --f2-surface-card:     var(--f2-paper-100);
    --f2-surface-sunken:   var(--f2-paper-300);
    --f2-surface-accent:   var(--f2-amber-wash);

    --f2-text:             var(--f2-ink);
    --f2-text-secondary:   var(--f2-ink-500);
    --f2-text-muted:       var(--f2-ink-400);
    --f2-text-faint:       var(--f2-gray-500);
    --f2-text-on-accent:   var(--f2-ink);

    --f2-accent:           var(--f2-amber);
    --f2-accent-hover:     var(--f2-amber-press);
    --f2-accent-text:      var(--f2-amber-deep);
    --f2-accent-border:    var(--f2-accent-line);

    --f2-border:           var(--f2-line-ink);
    --f2-border-strong:    var(--f2-line-ink-strong);
  }
}