/*
 * aipozi design tokens
 * One source of truth for aipozi.com and the dashboard.
 * Light first. Dark via prefers-color-scheme, or force with
 * <html data-theme="light|dark">.
 *
 * Fonts (load from Google Fonts):
 *   Schibsted Grotesk 400;500;600;700  — interface, headings, numbers
 *   Source Serif 4 400;600 (opsz)      — long-form reading only (articles)
 */

:root {
  /* ---------- Colour: neutrals (cool stone, a hint of green) ---------- */
  --stone-0:   #ffffff;
  --stone-25:  #fafbfa;
  --stone-50:  #f4f6f4;
  --stone-100: #eceeec;
  --stone-200: #dde1de;
  --stone-300: #c5cbc7;
  --stone-400: #9aa29d;
  --stone-500: #6d7671;
  --stone-600: #4e5752;
  --stone-700: #353d39;
  --stone-800: #222926;
  --stone-900: #141a17;

  /* ---------- Colour: brand + signal ---------- */
  --ledger-50:  #e9f4ee;
  --ledger-100: #cfe7da;
  --ledger-500: #13865b;
  --ledger-600: #0d7049;   /* brand: the colour of "named and linked" */
  --ledger-700: #0a573a;

  --amber-50:  #fbf3e2;
  --amber-500: #b7791f;    /* named, but no address given */
  --amber-600: #94610f;

  --brick-50:  #fbecea;
  --brick-500: #c0412f;    /* not named */
  --brick-600: #a2321f;

  --ink-blue-600: #24477a; /* links in long-form text */

  /* ---------- Semantic (light) ---------- */
  --bg:            var(--stone-0);
  --bg-subtle:     var(--stone-25);
  --bg-muted:      var(--stone-50);
  --surface:       var(--stone-0);
  --surface-raised:var(--stone-0);
  --surface-sunken:var(--stone-50);
  --border:        var(--stone-200);
  --border-strong: var(--stone-300);
  --rule:          var(--stone-100);

  --text:          var(--stone-900);
  --text-2:        var(--stone-600);
  --text-3:        var(--stone-500);
  --text-inverse:  var(--stone-0);

  --accent:        var(--ledger-600);
  --accent-hover:  var(--ledger-700);
  --accent-soft:   var(--ledger-50);
  --accent-text:   var(--ledger-700);
  --on-accent:     #ffffff;

  --link:          var(--ink-blue-600);

  --state-named:        var(--ledger-600);
  --state-named-bg:     var(--ledger-50);
  --state-partial:      var(--amber-500);
  --state-partial-text: var(--amber-600);
  --state-partial-bg:   var(--amber-50);
  --state-miss:         var(--brick-500);
  --state-miss-text:    var(--brick-600);
  --state-miss-bg:      var(--brick-50);

  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);

  /* ---------- Type ---------- */
  --font-sans:  "Schibsted Grotesk", ui-sans-serif, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-serif: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --font-mono:  ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* code only */

  /* Scale: 1.25 (major third) from 16px, with a display step */
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-38: 2.375rem;
  --fs-48: 3rem;
  --fs-60: 3.75rem;
  --fs-display: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);

  --lh-tight: 1.04;
  --lh-snug:  1.2;
  --lh-body:  1.55;
  --lh-read:  1.7;  /* serif long-form */

  --tracking-display: -0.032em;
  --tracking-heading: -0.02em;
  --tracking-body:    -0.003em;

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

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

  --page-max: 1180px;
  --read-max: 680px;
  --gutter: clamp(16px, 4vw, 40px);

  /* ---------- Radii: small for data, larger for frames ---------- */
  --r-xs: 3px;    /* chips, run ticks */
  --r-sm: 6px;    /* inputs, buttons */
  --r-md: 10px;   /* panels */
  --r-lg: 16px;   /* product frames */
  --r-pill: 999px;

  /* ---------- Shadows: layered, low and precise ---------- */
  --shadow-1: 0 1px 0 rgba(20, 26, 23, 0.04), 0 1px 2px rgba(20, 26, 23, 0.06);
  --shadow-2: 0 1px 1px rgba(20, 26, 23, 0.04), 0 4px 10px -2px rgba(20, 26, 23, 0.07);
  --shadow-frame:
    0 0 0 1px rgba(20, 26, 23, 0.06),
    0 2px 4px rgba(20, 26, 23, 0.04),
    0 12px 24px -6px rgba(20, 26, 23, 0.08),
    0 40px 80px -24px rgba(20, 26, 23, 0.16);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-1: 120ms;
  --dur-2: 220ms;

  color-scheme: light;
}

/* ---------- Dark ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #0f1412;
    --bg-subtle:     #121816;
    --bg-muted:      #161d1a;
    --surface:       #171e1b;
    --surface-raised:#1c2420;
    --surface-sunken:#121816;
    --border:        #2a332f;
    --border-strong: #3a4540;
    --rule:          #212925;

    --text:          #e8ede9;
    --text-2:        #aab3ae;
    --text-3:        #85908a;
    --text-inverse:  #0f1412;

    --accent:        #3fb98a;
    --accent-hover:  #5fcaa0;
    --accent-soft:   rgba(63, 185, 138, 0.13);
    --accent-text:   #6fd1aa;
    --on-accent:     #08130e;

    --link:          #9cbcf0;

    --state-named:        #3fb98a;
    --state-named-bg:     rgba(63, 185, 138, 0.13);
    --state-partial:      #e0a646;
    --state-partial-text: #eab865;
    --state-partial-bg:   rgba(224, 166, 70, 0.13);
    --state-miss:         #e66a57;
    --state-miss-text:    #ef8a79;
    --state-miss-bg:      rgba(230, 106, 87, 0.13);

    --shadow-1: 0 1px 0 rgba(0,0,0,.3);
    --shadow-2: 0 4px 12px -2px rgba(0,0,0,.4);
    --shadow-frame: 0 0 0 1px rgba(255,255,255,.06), 0 24px 60px -20px rgba(0,0,0,.6);

    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg:            #0f1412;
  --bg-subtle:     #121816;
  --bg-muted:      #161d1a;
  --surface:       #171e1b;
  --surface-raised:#1c2420;
  --surface-sunken:#121816;
  --border:        #2a332f;
  --border-strong: #3a4540;
  --rule:          #212925;

  --text:          #e8ede9;
  --text-2:        #aab3ae;
  --text-3:        #85908a;
  --text-inverse:  #0f1412;

  --accent:        #3fb98a;
  --accent-hover:  #5fcaa0;
  --accent-soft:   rgba(63, 185, 138, 0.13);
  --accent-text:   #6fd1aa;
  --on-accent:     #08130e;

  --link:          #9cbcf0;

  --state-named:        #3fb98a;
  --state-named-bg:     rgba(63, 185, 138, 0.13);
  --state-partial:      #e0a646;
  --state-partial-text: #eab865;
  --state-partial-bg:   rgba(224, 166, 70, 0.13);
  --state-miss:         #e66a57;
  --state-miss-text:    #ef8a79;
  --state-miss-bg:      rgba(230, 106, 87, 0.13);

  --shadow-1: 0 1px 0 rgba(0,0,0,.3);
  --shadow-2: 0 4px 12px -2px rgba(0,0,0,.4);
  --shadow-frame: 0 0 0 1px rgba(255,255,255,.06), 0 24px 60px -20px rgba(0,0,0,.6);

  color-scheme: dark;
}

/* ---------- Aurora: the aipozi.com brand theme (dark, chosen 27 Oct) ----------
 * <html data-theme="aurora">. Deep ink surfaces, glass panels, light text.
 * The aurora light itself (emerald, cyan, gold) is decoration for heroes only;
 * data states keep their meaning (green named, amber partial, brick missed). */
:root[data-theme="aurora"] {
  --aurora-ink:     #06121a;
  --aurora-emerald: #0b8a63;
  --aurora-cyan:    #1a8fb0;
  --aurora-gold:    #f0a94a;

  --bg:            #06121a;
  --bg-subtle:     rgba(255,255,255,.03);
  --bg-muted:      #08171f;
  --surface:       rgba(255,255,255,.04);
  --surface-raised:rgba(255,255,255,.06);
  --surface-sunken:rgba(0,0,0,.18);
  --border:        rgba(255,255,255,.09);
  --border-strong: rgba(255,255,255,.16);
  --rule:          rgba(255,255,255,.07);

  --text:          #eef3f6;
  --text-2:        rgba(226,236,240,.72);
  --text-3:        rgba(214,226,232,.52);
  --text-inverse:  #06121a;

  --accent:        #f2f6f4;   /* primary buttons: light on ink */
  --accent-hover:  #ffffff;
  --accent-soft:   rgba(79,209,165,.12);
  --accent-text:   #7fe3c0;
  --on-accent:     #06121a;
  --link:          #a9d8ff;

  --state-named:        #4fd1a5;
  --state-named-bg:     rgba(79,209,165,.13);
  --state-partial:      #f1c27a;
  --state-partial-text: #f1c27a;
  --state-partial-bg:   rgba(241,194,122,.12);
  --state-miss:         #f29a8a;
  --state-miss-text:    #f29a8a;
  --state-miss-bg:      rgba(242,154,138,.12);

  --font-sans: "Instrument Sans", ui-sans-serif, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --focus-ring: 0 0 0 3px rgba(127,227,192,.35);
  --shadow-1: 0 1px 0 rgba(0,0,0,.3);
  --shadow-2: inset 0 1px 0 rgba(255,255,255,.06), 0 30px 80px -30px rgba(0,0,0,.7);
  --shadow-frame: inset 0 1px 0 rgba(255,255,255,.08), 0 50px 120px -30px rgba(0,0,0,.75), 0 20px 40px -20px rgba(0,0,0,.5);
  color-scheme: dark;
}