/* ─────────────────────────────────────────────────────────────
   lsb.studio — design tokens
   Loaded once globally. Must NOT be purged by page-transition.js
   (page-transition.js removes <style> blocks; this lives in <link>).

   Two themes scoped via [data-theme] on <html> or <body>:
     [data-theme="warm"]  — portfolio/personal pages (default)
     [data-theme="slate"] — business/work-sample pages

   Pages opt in by setting <body data-theme="slate"> (or omitting for warm).
   ───────────────────────────────────────────────────────────── */


/* ── Theme: warm (default) ─────────────────────────────────── */
:root,
[data-theme="warm"] {
  /* surface — cream is the unified warm bg across landing pages
     and all other warm pages (rowboat-dashboard, mytwin, etc.). */
  --bg:           #f5f1eb;
  --pane:         #faf8f4;
  --surface:     #eee9e0;

  /* ink */
  --ink:          #2a2520;
  --ink-light:    #8a8278;
  --ink-faint:    #c5bfb5;

  /* lines */
  --border:       #ddd7cd;
  --border-strong:#ccc5b8;

  /* accents */
  --accent:       #c47a3a;   /* warm orange — primary hover/CTA */
  --accent-deep:  #b54a32;   /* red-orange — critical/emphasis */
  --gold:         #c4a23a;   /* minor accent */
  --sage:         #5a8a4a;   /* success/ok */

  /* legacy alias — pages still reference var(--hover); same as --accent */
  --hover:        var(--accent);

  /* shadow base — tinted with ink */
  --shadow-rgb: 42, 37, 32;
}


/* ── Theme: dark (sunset → sunrise on landing pages) ─────── */
:root[data-theme="dark"],
[data-theme="dark"] {
  /* surface — deep warm charcoal, holds the cream/orange palette identity */
  --bg:           #1a1410;
  --pane:         #221c17;
  --surface:      #2a221b;

  /* ink — flipped: cream foreground on dark ground */
  --ink:          #ebe3d4;
  --ink-light:    #998c7e;
  --ink-faint:    #4a4138;

  /* lines */
  --border:       #3a322b;
  --border-strong:#4a4138;

  /* accents — slightly amplified for legibility against dark */
  --accent:       #d4914a;
  --accent-deep:  #c46332;
  --gold:         #d4b04a;
  --sage:         #6aa05a;

  --hover:        var(--accent);

  /* shadow base — lighter ink-tint so shadows still register */
  --shadow-rgb: 235, 227, 212;
}


/* ── Theme: slate (business / work samples) ───────────────── */
[data-theme="slate"] {
  /* surface */
  --bg:           #F8FAFB;
  --pane:         #FFFFFF;
  --surface:      #F1F5F9;

  /* ink */
  --ink:          #1E293B;
  --ink-light:    #64748B;
  --ink-faint:    #94A3B8;

  /* lines */
  --border:       #E2E8F0;
  --border-strong:#CBD5E1;

  /* accents */
  --accent:       #475569;   /* neutral slate accent */
  --accent-deep:  #2563EB;   /* blue — primary CTA */
  --gold:         #D97706;   /* amber */
  --sage:         #059669;   /* green */

  /* semantic — work-sample pages need these for charts/data */
  --good:         #059669;
  --warn:         #D97706;
  --deny:         #DC2626;

  /* legacy alias — pages still reference var(--hover); same as --accent */
  --hover:        var(--accent);

  /* shadow base — tinted with ink */
  --shadow-rgb: 30, 41, 59;
}


/* ── Type ──────────────────────────────────────────────────── */
:root {
  --font-sans:  'Libre Franklin', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-mono:  'IBM Plex Mono', 'Courier New', monospace;

  /* legacy aliases — keep until pages migrate */
  --sans:   var(--font-sans);
  --serif:  var(--font-serif);
  --mono:   var(--font-mono);

  /* size scale — small-text-heavy by design (data tables, meta) */
  --text-micro:    0.55rem;   /* 8.8px  — densest tables */
  --text-tiny:     0.65rem;   /* 10.4px — meta labels */
  --text-small:    0.75rem;   /* 12px   — secondary */
  --text-body:     0.875rem;  /* 14px   — body */
  --text-md:       1rem;      /* 16px */
  --text-lg:       1.25rem;   /* 20px */
  --text-xl:       1.6rem;    /* 25.6px */
  --text-display:  2.4rem;    /* 38.4px */

  /* line height */
  --leading-tight: 1.2;
  --leading-base:  1.5;
  --leading-loose: 1.7;

  /* tracking — site uses heavy letter-spacing on lowercase nav */
  --tracking-tight: -0.01em;
  --tracking-base:   0;
  --tracking-wide:   0.06em;
  --tracking-nav:    0.18em;  /* matches index.html .title */
}


/* ── Spacing ───────────────────────────────────────────────── */
:root {
  --space-px:  1px;
  --space-1:   0.25rem;   /* 4 */
  --space-2:   0.5rem;    /* 8 */
  --space-3:   0.75rem;   /* 12 */
  --space-4:   1rem;      /* 16 */
  --space-5:   1.5rem;    /* 24 */
  --space-6:   2rem;      /* 32 */
  --space-8:   3rem;      /* 48 */
}


/* ── Borders & radius ──────────────────────────────────────── */
:root {
  --radius-sm:    2px;
  --radius-md:    4px;
  --radius-lg:    8px;
  --radius-xl:   12px;
  --radius-pill: 999px;
  --radius-round: 50%;
}


/* ── Elevation (shadows derive from --shadow-rgb per theme) ── */
:root {
  --shadow-1: 0 1px 3px  rgba(var(--shadow-rgb), 0.06);
  --shadow-2: 0 2px 10px rgba(var(--shadow-rgb), 0.08);
  --shadow-3: 0 8px 32px rgba(var(--shadow-rgb), 0.12);
  --shadow-inset: inset 0 1px 3px rgba(var(--shadow-rgb), 0.04);
}


/* ── Motion ────────────────────────────────────────────────── */
:root {
  --dur-fast:  150ms;
  --dur-base:  300ms;
  --dur-slow:  600ms;
  --dur-page: 1200ms;

  --ease-default: ease-out;
  --ease-out:     cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* ── Reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast:  1ms;
    --dur-base:  1ms;
    --dur-slow:  1ms;
    --dur-page:  1ms;
  }
}
