/* ============================================================
   Design tokens — Prashant's portfolio
   Single source of truth for color, type, spacing, motion.
   Both themes are first-class; dark is NOT inverted light.
   ============================================================ */

:root {
  /* ---- Spacing — 8pt scale ---- */
  --s-0:   0;
  --s-1:   0.25rem;   /*  4 */
  --s-2:   0.5rem;    /*  8 */
  --s-3:   0.75rem;   /* 12 */
  --s-4:   1rem;      /* 16 */
  --s-5:   1.5rem;    /* 24 */
  --s-6:   2rem;      /* 32 */
  --s-7:   3rem;      /* 48 */
  --s-8:   4rem;      /* 64 */
  --s-9:   6rem;      /* 96 */
  --s-10:  8rem;      /* 128 */

  /* ---- Type scale ----
     fs-display upper bound dropped from 3.5rem → 2.875rem so wide viewports
     don't shout. Lower bound + slope unchanged: small viewports still get a
     confident hero. fs-h1 also slightly more restrained. */
  --fs-display:   clamp(2.25rem, 1.55rem + 2.0vw, 2.875rem);
  --fs-h1:        clamp(1.625rem, 1.35rem + 1.1vw, 2.125rem);
  --fs-h2:        clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem);
  --fs-h3:        1.25rem;
  --fs-h4:        1.0625rem;
  --fs-body:      1.125rem;     /* 18px */
  --fs-small:     0.9375rem;    /* 15px */
  --fs-caption:   0.8125rem;    /* 13px */
  --fs-code:      0.9375rem;

  --lh-tight:     1.2;
  --lh-snug:      1.35;
  --lh-body:      1.65;
  --lh-loose:     1.75;

  --measure:      68ch;

  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-loose:   0.04em;
  --tracking-caps:    0.08em;

  /* ---- Font stacks (self-host in production; falls back gracefully) ---- */
  /* Indic fallbacks load only when those scripts appear (see styles.css :lang() rules) */
  --font-serif: "Source Serif 4", "Source Serif Pro", "Noto Serif Devanagari", "Noto Serif Gurmukhi", Georgia, "Iowan Old Style", serif;
  --font-sans:  "Inter", "Noto Sans Devanagari", "Noto Sans Gurmukhi", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- Radii (almost none — this is a notebook, not a SaaS card) ---- */
  --r-1: 2px;
  --r-2: 4px;
  --r-pill: 999px;

  /* ---- Borders ---- */
  --bw-hair: 1px;

  /* ---- Motion ---- */
  --motion-fast: 120ms;
  --motion:      150ms;
  --motion-slow: 240ms;
  --ease:        cubic-bezier(0.2, 0, 0, 1);

  /* ---- Layout ---- */
  --col-text:       40rem;       /* 640px reading column */
  --col-wide:       62rem;       /* 992px including sidenote gutter */
  --gutter:         var(--s-7);
  --sidenote-w:     14rem;

  /* ---- Light theme (default) ---- */
  --bg:           #faf8f4;
  --bg-2:         #f3eee3;
  --bg-sunken:    #ede7d8;
  --fg:           #1b1815;
  --fg-muted:     #685e52;
  --fg-subtle:    #948a7c;
  --border:       #e3dccb;
  --border-strong:#cdc3ad;
  --rule:         #d8d0bd;

  --accent:       #1f5a5e;
  --accent-hover: #144649;
  --accent-muted: #6ea1a4;
  --accent-bg:    #dfeaea;

  --code-bg:      #f1ebdb;
  --code-fg:      #2a2520;
  --code-comment: #8a7f6c;
  --code-keyword: #1f5a5e;
  --code-string:  #4f5d3a;
  --code-number:  #6e4a1a;
  --code-fn:      #355264;

  --selection-bg: #b8d3d4;
  --focus-ring:   #1f5a5e;
  --shadow-none:  none;

  --paper-noise-opacity: 0.022;
}

[data-theme="dark"] {
  --bg:           #161310;
  --bg-2:         #1e1a15;
  --bg-sunken:    #100d0a;
  --fg:           #ece4d4;
  --fg-muted:     #a39a89;
  --fg-subtle:    #6f6759;
  --border:       #2c2620;
  --border-strong:#3d352c;
  --rule:         #2a241e;

  --accent:       #6ea7aa;
  --accent-hover: #88bdc0;
  --accent-muted: #4d7e80;
  --accent-bg:    #15282a;

  --code-bg:      #1c1814;
  --code-fg:      #d8d0c0;
  --code-comment: #76705f;
  --code-keyword: #88bdc0;
  --code-string:  #b9c096;
  --code-number:  #d4a86a;
  --code-fn:      #c3b89a;

  --selection-bg: #244c4f;
  --focus-ring:   #6ea7aa;

  --paper-noise-opacity: 0.03;
}

/* ---- Accent variants exposed for tweak panel ---- */
[data-accent="terracotta"] {
  --accent:       #b5533c;
  --accent-hover: #9c4530;
  --accent-muted: #d99a87;
  --accent-bg:    #f5e7df;
  --selection-bg: #f0c8b8;
  --focus-ring:   #b5533c;
  --code-keyword: #8b3f2c;
}
[data-theme="dark"][data-accent="terracotta"] {
  --accent:       #d97a5e;
  --accent-hover: #e89279;
  --accent-muted: #b06650;
  --accent-bg:    #2a1d18;
  --selection-bg: #5a3525;
  --focus-ring:   #d97a5e;
  --code-keyword: #d99a7a;
}

[data-accent="copper"] {
  --accent:       #7a4a2b;
  --accent-hover: #623a1f;
  --accent-muted: #b08869;
  --accent-bg:    #efe2d3;
  --selection-bg: #d9bfa1;
  --focus-ring:   #7a4a2b;
  --code-keyword: #7a4a2b;
}
[data-theme="dark"][data-accent="copper"] {
  --accent:       #c89673;
  --accent-hover: #d6a886;
  --accent-muted: #8e6749;
  --accent-bg:    #261b13;
  --selection-bg: #4a3221;
  --focus-ring:   #c89673;
  --code-keyword: #d6a886;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
  }
}