/* ============================================================================
   chrome-tokens.css — RGdox Shared Chrome (the single visual source of truth)
   ----------------------------------------------------------------------------
   "Living blueprint." Two poles mapped to light/dark (CONTEXT.md "Shared
   Chrome", ADR-0003 era redesign 2026-06-12):

     LIGHT  · Blueprint : blue ink (#0053FD) on pale paper (#E8F2FD)
     DARK   · Phosphor  : amber (#FFAC02) on umber (#170D02)

   It deliberately REUSES the legacy token names (--fg-1, --brand-500, --border,
   --canvas, --space-*, --radius-*, --font-mono …) so existing markup and the
   Content Track templates reskin by simply pointing here instead of
   clean-analytics.css. Structure = hairline CAD grid, solid inverse chips,
   sharp corners, one rotating arc-border flourish. No WebGL.

   Type: Geist for shelf UI / --font-reading; Charter (--font-serif) for
   Document body (see doc-reading.css); Courier Prime for labels/mono.

   Curated Documents link this file + doc-reading.css (+ ai-daily.css for the
   AI Daily track). Foreign uploads keep their own CSS — never force these.

   Mode wiring matches the index's 3-state cycle:
     - no [data-theme]      → follow OS (prefers-color-scheme)
     - [data-theme="light"] → force Blueprint
     - [data-theme="dark"]  → force Phosphor
   ========================================================================== */

/* ── Fonts (all self-hosted; no remote loads) ───────────────────────────── */
@font-face { font-family:"Geist"; src:url("fonts/geist-variable.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap; }
@font-face { font-family:"Geist Mono"; src:url("fonts/geist-mono-variable.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap; }
@font-face { font-family:"Courier Prime"; src:url("fonts/courier-prime.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Courier Prime"; src:url("fonts/courier-prime-bold.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }

/* ── Shared, pole-independent tokens ────────────────────────────────────── */
:root {
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Charter", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-reading: var(--font-sans); /* shelf / UI; Documents override via doc-reading.css */
  --font-mono: "Courier Prime", "Courier New", "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type ramp */
  --text-xs: 11px; --text-sm: 12.5px; --text-base: 14px; --text-md: 15px;
  --text-lg: 18px; --text-xl: 22px; --text-2xl: 28px;
  --read-base: 18px;                 /* comfortable Document body */
  --read-lg: 20px;
  --read-xl: 24px;
  --read-2xl: 32px;
  --read-display: clamp(28px, 5vw, 44px);
  --leading-snug: 1.3; --leading-normal: 1.55; --leading-reading: 1.7;
  --tracking-eyebrow: 0.14em; --tracking-snug: -0.01em; --tracking-wide: 0.06em;

  /* Spacing (4px base) */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; --space-20:80px;

  /* Shape — blueprint is sharp. Corners 0; pills stay round for pips only. */
  --radius-xs:0; --radius-sm:0; --radius-md:0; --radius-lg:0; --radius-xl:0; --radius-full:999px;

  /* Motion */
  --dur-fast:.15s; --dur-mid:.25s; --ease-out:cubic-bezier(.2,0,0,1);

  /* Min interactive target (mobile) */
  --tap:44px;
}

/* ── LIGHT · Blueprint pole (default) ───────────────────────────────────── */
:root, :root[data-theme="light"] {
  --paper:        #E8F2FD;
  --canvas:       #E8F2FD;
  --canvas-100:   #DDEBFB;
  --surface:      #F6FAFF;
  --surface-alt:  #EEF5FE;
  --overlay:      rgba(10,31,51,.45);

  --ink:          #0A1F33;
  --fg-1:         #0A1F33;   /* body text */
  --fg-2:         #234567;   /* secondary */
  --fg-3:         #3F5F7D;   /* tertiary / placeholder / labels (≥4.5:1 on paper) */
  --fg-4:         #3F5F7D;   /* alias to fg-3 — faint text must stay readable */
  --fg-on-brand:  #E8F2FD;   /* text on a filled accent (inverse chip) */
  --fg-link:      #0046D6;

  --accent:       #0053FD;
  --accent-soft:  #D4E4FF;
  --brand-50:#EAF1FF; --brand-100:#D4E4FF; --brand-200:#A9C8FF; --brand-300:#6FA0FF;
  --brand-400:#2E72FB; --brand-500:#0053FD; --brand-600:#0046D6; --brand-700:#0039AE; --brand-800:#062E86; --brand-900:#08214f;

  --border:        rgba(0,83,253,.20);
  --border-strong: rgba(0,83,253,.34);
  --border-focus:  #0053FD;

  --success: #0a7a52; --success-bg: #d9f3e7; --chip-success-fg: #06351F;
  --warning: #9a6a00; --warning-bg: #fdeccb; --danger: #c0263b; --danger-bg: #fbdce1; --info: #0053FD; --info-bg:#D4E4FF;

  --shadow-focus: 0 0 0 2px rgba(0,83,253,.30);

  /* Document aliases (Create / cron tracks — same poles, friendlier names) */
  --bg: var(--canvas);
  --bg-card: var(--surface);
  --bg-elev: var(--canvas-100);
  --ink-soft: var(--fg-2);
  --ink-faint: var(--fg-3);
  --rule: var(--border);
  --rule-soft: rgba(0,83,253,.08);
  --accent-strong: var(--brand-600);
  --accent-visited: var(--brand-700);
  --accent-line: var(--brand-200);
  --accent-contrast: var(--fg-on-brand);

  color-scheme: light;
}

/* ── DARK · Phosphor pole ───────────────────────────────────────────────── */
:root[data-theme="dark"] {
  --paper:        #170D02;
  --canvas:       #170D02;
  --canvas-100:   #1F1305;
  --surface:      #1E1305;
  --surface-alt:  #241808;
  --overlay:      rgba(0,0,0,.55);

  --ink:          #F0CE92;
  --fg-1:         #F0CE92;
  --fg-2:         #D7A24A;
  --fg-3:         #C9A25A;
  --fg-4:         #C9A25A;
  --fg-on-brand:  #170D02;
  --fg-link:      #FFC23D;

  --accent:       #FFAC02;
  --accent-soft:  #3A2A08;
  --brand-50:#241808; --brand-100:#3A2A08; --brand-200:#5B4310; --brand-300:#8A6718;
  --brand-400:#C68C1E; --brand-500:#FFAC02; --brand-600:#FFC23D; --brand-700:#FFD479; --brand-800:#FFE3A6; --brand-900:#FFF0CF;

  --border:        rgba(255,172,2,.22);
  --border-strong: rgba(255,172,2,.40);
  --border-focus:  #FFAC02;

  --success:#3fbf87; --success-bg:#11301f; --chip-success-fg:#FFE3A6;
  --warning:#FFC23D; --warning-bg:#33260a; --danger:#ff7b7b; --danger-bg:#3a1414; --info:#FFAC02; --info-bg:#33260a;

  --shadow-focus: 0 0 0 2px rgba(255,172,2,.35);

  --bg: var(--canvas);
  --bg-card: var(--surface);
  --bg-elev: var(--canvas-100);
  --ink-soft: var(--fg-2);
  --ink-faint: var(--fg-3);
  --rule: var(--border);
  --rule-soft: rgba(255,172,2,.08);
  --accent-strong: var(--brand-600);
  --accent-visited: var(--brand-700);
  --accent-line: var(--brand-200);
  --accent-contrast: var(--fg-on-brand);

  color-scheme: dark;
}

/* Follow the OS when no manual override is set. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:#170D02; --canvas:#170D02; --canvas-100:#1F1305; --surface:#1E1305; --surface-alt:#241808; --overlay:rgba(0,0,0,.55);
    --ink:#F0CE92; --fg-1:#F0CE92; --fg-2:#D7A24A; --fg-3:#C9A25A; --fg-4:#C9A25A; --fg-on-brand:#170D02; --fg-link:#FFC23D;
    --accent:#FFAC02; --accent-soft:#3A2A08;
    --brand-50:#241808; --brand-100:#3A2A08; --brand-200:#5B4310; --brand-300:#8A6718; --brand-400:#C68C1E; --brand-500:#FFAC02; --brand-600:#FFC23D; --brand-700:#FFD479; --brand-800:#FFE3A6; --brand-900:#FFF0CF;
    --border:rgba(255,172,2,.22); --border-strong:rgba(255,172,2,.40); --border-focus:#FFAC02;
    --success:#3fbf87; --success-bg:#11301f; --chip-success-fg:#FFE3A6; --warning:#FFC23D; --warning-bg:#33260a; --danger:#ff7b7b; --danger-bg:#3a1414; --info:#FFAC02; --info-bg:#33260a;
    --shadow-focus:0 0 0 2px rgba(255,172,2,.35);
    --bg:var(--canvas); --bg-card:var(--surface); --bg-elev:var(--canvas-100);
    --ink-soft:var(--fg-2); --ink-faint:var(--fg-3); --rule:var(--border);
    --rule-soft:rgba(255,172,2,.08); --accent-strong:var(--brand-600);
    --accent-visited:var(--brand-700); --accent-line:var(--brand-200);
    --accent-contrast:var(--fg-on-brand);
    color-scheme:dark;
  }
}

/* ── Base ───────────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body {
  font: var(--text-base)/var(--leading-normal) var(--font-sans);
  color: var(--fg-1); background: var(--canvas);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a { color: var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
::selection { background: var(--accent); color: var(--fg-on-brand); }
::placeholder { color: var(--fg-3); }

/* ── Eyebrow / technical label (the Courier layer) ──────────────────────── */
.eyebrow, .bp-eyebrow {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--fg-3); font-weight: 700;
}

/* ── Solid inverse chip ─────────────────────────────────────────────────── */
.bp-chip {
  display:inline-flex; align-items:center; gap:5px;
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight:700;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  padding: 2px 8px; background: var(--accent); color: var(--fg-on-brand);
  border:0; border-radius: var(--radius-sm); white-space:nowrap;
}
.bp-chip.ghost { background:transparent; color:var(--fg-3); border:1px solid var(--border-strong); }
.bp-chip .pip { width:6px; height:6px; border-radius:var(--radius-full); background: currentColor; }
@keyframes pip-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.bp-chip .pip.live { animation: pip-pulse 2s ease-in-out infinite; }

/* ── Hairline grid (CAD / card-catalog) ─────────────────────────────────── */
.bp-grid {
  display:grid; gap:0;
  border:1px solid var(--border); background: var(--border);
}
.bp-grid > * { background: var(--surface); }   /* 1px gutters read as hairlines */

/* ── Arc accent (one-shot settle → static left hairline) ───────────────── */
.arc { position:relative; isolation:isolate; }
.arc::before {
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: linear-gradient(var(--accent), var(--accent)) left / 2px 100% no-repeat;
  opacity:.85;
  animation: arc-settle 360ms var(--ease-out) both;
}
.today-card.arc:nth-child(2)::before { animation-delay: 120ms; }
@keyframes arc-settle {
  from { opacity:0; transform: translateY(4px); }
  to { opacity:.85; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .arc::before { animation:none; opacity:.85; transform:none; }
}

/* ── Comfortable reading body (Documents, track drops) ──────────────────── */
.reading {
  font-family: var(--font-reading);
  font-size: var(--read-base);
  line-height: var(--leading-reading);
  color: var(--fg-1);
}
.reading h1,.reading h2,.reading h3 { line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); }

/* ── Misc ───────────────────────────────────────────────────────────────── */
code, kbd, samp, .mono { font-family: var(--font-mono); font-size:.92em; }
hr { border:0; border-top:1px solid var(--border); }
@media print { body { background:#fff; } }