/* ============================================================
   RANK TUNER — Design Tokens · v1
   "Precision Editorial" · mint-led · light + dark
   Single styling source. CSS custom properties only.
   Theme:    [data-theme="light" | "dark"]   (default light)
   Density:  [data-density="comfortable" | "compact"]
   Accent:   [data-accent="mint" | "salmon"]  (lead accent)
   ============================================================ */

:root {
  /* ---- Raw palette — Mint (primary / growth / system-running) ---- */
  --mint-50:  #ECFBF6;
  --mint-100: #D2F4EA;
  --mint-300: #7FE0C9;
  --mint-500: #22C29E;
  --mint-600: #12A487;
  --mint-700: #0C7E69;

  /* ---- Raw palette — Salmon (attention / decay / destructive) ---- */
  --salmon-50:  #FFF1EE;
  --salmon-300: #FFB3A8;
  --salmon-500: #FF7A6B;
  --salmon-600: #F25542;
  --salmon-700: #C9392B;

  /* ---- Raw palette — Neutrals (warm ink on warm paper) ---- */
  --paper:    #FAFAF8;
  --surface:  #FFFFFF;
  --border:   #E7E7E2;
  --ink-400:  #8A8F8C;
  --ink-450:  #6C706D;   /* muted text that must meet AA (4.81 paper / 5.03 surface) */
  --ink-600:  #4A4F4D;
  --ink-900:  #0E1417;

  /* ---- Semantic hues ---- */
  --amber:  #F5A623;   /* warning */
  --blue:   #2D7FF9;   /* info */
  --violet: #9B6DFF;
  --teal:   #3AA8A0;

  /* ---- Data-viz categorical (accessible, distinct) ---- */
  --viz-1: #12A487;  /* mint  */
  --viz-2: #2D7FF9;  /* blue  */
  --viz-3: #F5A623;  /* amber */
  --viz-4: #9B6DFF;  /* violet*/
  --viz-5: #F25542;  /* salmon*/
  --viz-6: #3AA8A0;  /* teal  */

  /* ---- Type families ---- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-ui:      "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono:    "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  /* ---- Type scale (rem · 1rem = 16px) ---- */
  --fs-2xs: 0.75rem;    /* 12 */
  --fs-xs:  0.875rem;   /* 14 */
  --fs-sm:  1rem;       /* 16 */
  --fs-base:1.125rem;   /* 18 */
  --fs-md:  1.25rem;    /* 20 */
  --fs-lg:  1.5rem;     /* 24 */
  --fs-xl:  1.875rem;   /* 30  display */
  --fs-2xl: 2.25rem;    /* 36  display */
  --fs-3xl: 3rem;       /* 48  display */
  --fs-4xl: 3.75rem;    /* 60  display */
  --fs-5xl: 4.5rem;     /* 72  display */

  --lh-body:    1.5;
  --lh-display: 1.15;
  --lh-flat:    1.0;
  --tracking-display: -0.02em;
  --tracking-tight:   -0.01em;
  --tracking-eyebrow:  0.12em;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ---- Spacing (4px base) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-24: 96px;

  /* ---- Density-aware card / control padding ---- */
  --pad-card:    24px;
  --pad-control: 12px 16px;
  --row-h:       44px;
  --gutter:      32px;

  /* ---- Radius ---- */
  --r-control: 8px;
  --r-card:    12px;
  --r-modal:   16px;
  --r-pill:    999px;

  /* ---- Elevation (a whisper — borders do the work) ---- */
  --shadow-1: 0 1px 2px rgba(14,20,23,.04), 0 1px 3px rgba(14,20,23,.06);
  --shadow-2: 0 2px 4px rgba(14,20,23,.05), 0 4px 8px rgba(14,20,23,.06);
  --shadow-3: 0 6px 16px rgba(14,20,23,.08), 0 2px 6px rgba(14,20,23,.05);
  --shadow-4: 0 16px 40px rgba(14,20,23,.14), 0 4px 12px rgba(14,20,23,.08);

  /* ---- Motion ---- */
  --dur-fast:   150ms;
  --dur-normal: 200ms;
  --dur-slow:   250ms;
  --ease:       cubic-bezier(0.2, 0, 0.1, 1);

  /* ---- Always-on-fill foreground (elements sitting on a saturated fill;
     stays light in BOTH themes — buttons text on danger/primary, toggle knob,
     code text on the always-dark <pre>) ---- */
  --fg-on-color: #FFFFFF;
  --fg-on-ink:   #E7E7E2;

  /* ---- Focus ring (accent-700 → ≥4.5:1 vs page, ≥3:1 as UI indicator) ---- */
  --ring: 0 0 0 2px var(--bg-page), 0 0 0 4px var(--accent-700);
}

/* ============================================================
   SEMANTIC LAYER — light theme (default)
   ============================================================ */
:root,
[data-theme="light"] {
  --bg-page:     var(--paper);
  --bg-surface:  var(--surface);
  --bg-subtle:   #F4F4F1;
  --bg-inverse:  var(--ink-900);
  --hairline:    var(--border);
  --hairline-strong: #D8D8D2;

  --fg-1: var(--ink-900);   /* headings / primary */
  --fg-2: var(--ink-600);   /* body */
  --fg-3: var(--ink-450);   /* muted / secondary — AA (≥4.5) for readable labels;
                               raw --ink-400 reserved for large/disabled only */
  --fg-on-accent: #FFFFFF;
  --fg-on-inverse: #F2F4F2;

  /* lead accent — defaults mint, overridden by [data-accent] */
  --accent-50:  var(--mint-50);
  --accent-100: var(--mint-100);
  --accent-300: var(--mint-300);
  --accent-500: var(--mint-500);
  --accent-600: var(--mint-600);
  --accent-700: var(--mint-700);

  --success:   var(--mint-600);
  --success-bg:var(--mint-50);
  --warning:   var(--amber);
  --warning-bg:#FEF6E7;
  --danger:    var(--salmon-600);
  --danger-bg: var(--salmon-50);
  --info:      var(--blue);
  --info-bg:   #EAF2FE;

  /* text-bearing accent — AA on paper/surface (accent-700 = mint-700 #0C7E69,
     4.78 paper / 5.0 surface; salmon-led → salmon-700). Use for links,
     link-colored labels, inline accent text. NON-text fills keep --accent-600. */
  --fg-accent: var(--accent-700);
  --fg-link:   var(--accent-700);

  /* status-pill fg/bg pairs — fg AA-verified ≥4.5:1 on its bg (light) */
  --pill-backlog-fg:   var(--fg-2);        --pill-backlog-bg:   var(--bg-subtle);
  --pill-drafting-fg:  #1A5BC4;            --pill-drafting-bg:  var(--info-bg);
  --pill-review-fg:    #855B00;            --pill-review-bg:    var(--warning-bg);
  --pill-scheduled-fg: #6A3FC2;            --pill-scheduled-bg: color-mix(in srgb, var(--violet) 14%, transparent);
  --pill-published-fg: var(--accent-700);  --pill-published-bg: var(--accent-50);
  --pill-refresh-fg:   #1F6F69;            --pill-refresh-bg:   color-mix(in srgb, var(--teal) 16%, transparent);
  --pill-failed-fg:    var(--salmon-700);  --pill-failed-bg:    var(--danger-bg);

  --chart-grid: #EFEFEB;
  --chart-axis: var(--ink-450);
}

/* ============================================================
   SEMANTIC LAYER — dark theme (cockpit)
   ============================================================ */
[data-theme="dark"] {
  --bg-page:     #0E1417;
  --bg-surface:  #161D21;
  --bg-subtle:   #1B2429;
  --bg-inverse:  #F2F4F2;
  --hairline:    #26302F;
  --hairline-strong: #33403E;

  --fg-1: #F2F4F2;
  --fg-2: #C9CFCC;
  --fg-3: #8A938F;
  --fg-on-accent: #06241E;
  --fg-on-inverse: #0E1417;

  /* accents shift one step lighter for contrast on dark */
  --accent-50:  rgba(34,194,158,.12);
  --accent-100: rgba(34,194,158,.18);
  --accent-300: var(--mint-300);
  --accent-500: var(--mint-500);
  --accent-600: var(--mint-500);
  --accent-700: var(--mint-600);

  --success:   var(--mint-500);
  --success-bg:rgba(34,194,158,.14);
  --warning:   #F7B53D;
  --warning-bg:rgba(245,166,35,.14);
  --danger:    var(--salmon-500);
  --danger-bg: rgba(242,85,66,.16);
  --info:      #5C9DFF;
  --info-bg:   rgba(45,127,249,.16);

  /* text-bearing accent — AA on dark (accent-600 = mint-500 #22C29E, 8.2 page) */
  --fg-accent: var(--accent-600);
  --fg-link:   var(--accent-600);

  /* status-pill fg overrides — AA-verified ≥4.5:1 on dark pill bgs (≈6–8:1).
     bgs inherit the light definitions (info-bg/warning-bg/color-mix adapt). */
  --pill-drafting-fg:  #8FBAFF;
  --pill-review-fg:    #F7B53D;
  --pill-scheduled-fg: #BFA3FF;
  --pill-published-fg: var(--mint-300);
  --pill-refresh-fg:   #6FCFC7;
  --pill-failed-fg:    var(--salmon-300);

  --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3);
  --shadow-2: 0 2px 6px rgba(0,0,0,.45);
  --shadow-3: 0 8px 20px rgba(0,0,0,.5);
  --shadow-4: 0 18px 44px rgba(0,0,0,.6);

  --chart-grid: #222C2B;
  --chart-axis: #6F7B77;
}

/* ---- Accent override: salmon-led ---- */
[data-accent="salmon"] {
  --accent-50:  var(--salmon-50);
  --accent-100: #FFE3DD;
  --accent-300: var(--salmon-300);
  --accent-500: var(--salmon-500);
  --accent-600: var(--salmon-600);
  --accent-700: var(--salmon-700);
}
[data-theme="dark"][data-accent="salmon"] {
  --accent-50:  rgba(242,85,66,.12);
  --accent-100: rgba(242,85,66,.18);
  --accent-300: var(--salmon-300);
  --accent-500: var(--salmon-500);
  --accent-600: var(--salmon-500);
  --accent-700: var(--salmon-600);
  --fg-on-accent: #2A0E09;
}

/* ---- Density: compact ---- */
[data-density="compact"] {
  --pad-card:    16px;
  --pad-control: 8px 12px;
  --row-h:       36px;
  --gutter:      24px;
}