/* ============================================================
   DESIGN TOKENS — SHUBH PERSONAL ARCHIVE
   All design values in the system derive from this file.
   ============================================================ */

:root {

  /* ── Color Palette — Monochrome Black & White ────────────── */
  --color-bg:        #ffffff;   /* pure white                  */
  --color-surface:   #ffffff;   /* all white sidebar & panels  */
  --color-border:    #eaeaea;   /* clean minimal border        */
  --color-text-1:    #0a0a0a;   /* primary — black             */
  --color-text-2:    #444444;   /* secondary — dark gray       */
  --color-text-3:    #777777;   /* tertiary — mid gray         */
  --color-accent:    #0a0a0a;   /* links / active — black      */
  --color-accent-h:  #666666;   /* hover state — gray          */
  --color-code-bg:   #f5f5f5;   /* inline code background      */
  --color-selection: #e2e2e2;   /* neutral text selection      */
  --color-link-underline: rgba(10, 10, 10, 0.15); /* subtle hover underline */

  /* ── Typography — single font everywhere ────────────────── */
  --font-serif:   'Plus Jakarta Sans', system-ui, sans-serif;
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono:    'Plus Jakarta Sans', system-ui, sans-serif;

  /* Type Scale — Major Third ratio (×1.250) */
  --text-xs:    0.640rem;   /* 10.2px — captions, metadata  */
  --text-sm:    0.800rem;   /* 12.8px — labels, tags        */
  --text-base:  1.000rem;   /* 16px   — body                */
  --text-md:    1.250rem;   /* 20px   — subheadings         */
  --text-lg:    1.563rem;   /* 25px   — H3                  */
  --text-xl:    1.953rem;   /* 31px   — H2                  */
  --text-2xl:   2.441rem;   /* 39px   — H1 inner pages      */
  --text-3xl:   3.052rem;   /* 49px   — H1 home hero        */

  /* Line heights */
  --leading-tight:   1.12;
  --leading-snug:    1.35;
  --leading-normal:  1.55;
  --leading-relaxed: 1.72;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.06em;
  --tracking-wider:   0.10em;
  --tracking-widest:  0.14em;

  /* ── Spacing — 8pt grid ──────────────────────────────────── */
  --s-1:    4px;
  --s-2:    8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   24px;
  --s-6:   32px;
  --s-7:   48px;
  --s-8:   64px;
  --s-9:   96px;
  --s-10: 128px;

  /* ── Layout ──────────────────────────────────────────────── */
  --sidebar-width:   240px;
  --content-max:     68ch;     /* ~680px — optimal reading width */
  --content-padding: var(--s-8);

  /* ── Borders & Radius ────────────────────────────────────── */
  --radius-sm: 2px;
  --radius-md: 4px;
  --border-width: 1px;

  /* ── Transitions ─────────────────────────────────────────── */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:   cubic-bezier(0.4, 0, 1, 1);
  --t-fast:    140ms;
  --t-mid:     240ms;
  --t-slow:    400ms;
}

/* ── Dark Mode ──────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:       #0a0a0a;   /* pure black                  */
    --color-surface:  #0a0a0a;   /* all black sidebar & panels  */
    --color-border:   #2a2a2a;   /* lifted dark border           */
    --color-text-1:   #ffffff;   /* primary — white             */
    --color-text-2:   #b0b0b0;   /* secondary — light gray      */
    --color-text-3:   #999999;   /* tertiary — lifted for legibility */
    --color-accent:   #ffffff;   /* links / active — white      */
    --color-accent-h: #aaaaaa;   /* hover state — gray          */
    --color-code-bg:  #181818;   /* dark code background        */
    --color-selection:#333333;   /* dark text selection         */
    --color-link-underline: rgba(255, 255, 255, 0.25);
  }
}

html[data-theme="dark"] {
  --color-bg:       #0a0a0a;
  --color-surface:  #0a0a0a;
  --color-border:   #2a2a2a;
  --color-text-1:   #ffffff;
  --color-text-2:   #b0b0b0;
  --color-text-3:   #999999;
  --color-accent:   #ffffff;
  --color-accent-h: #aaaaaa;
  --color-code-bg:  #181818;
  --color-selection:#333333;
  --color-link-underline: rgba(255, 255, 255, 0.25);
}
html[data-theme="paper"] {
  --color-bg:        #fff2e4;
  --color-surface:   #fff2e4;
  --color-border:    #ead9c6;
  --color-text-1:    #16110d;
  --color-text-2:    #4f4135;
  --color-text-3:    #806f5f;
  --color-accent:    #16110d;
  --color-accent-h:  #6f5b4a;
  --color-code-bg:   #f5e2cf;
  --color-selection: #ecd3ba;
  --color-link-underline: rgba(22, 17, 13, 0.18);
}

html[data-theme="pista"] {
  --color-bg:        #e2ecd5;
  --color-surface:   #e2ecd5;
  --color-border:    #cad2b5;
  --color-text-1:    #13190e;
  --color-text-2:    #4a5342;
  --color-text-3:    #747d6b;
  --color-accent:    #13190e;
  --color-accent-h:  #64705a;
  --color-code-bg:   #d5e0c6;
  --color-selection: #cbd7ba;
  --color-link-underline: rgba(19, 25, 14, 0.20);
}

html[data-theme="amber"] {
  --color-bg:        #ffc17f;
  --color-surface:   #ffc17f;
  --color-border:    #dfa15f;
  --color-text-1:    #170d05;
  --color-text-2:    #4d3019;
  --color-text-3:    #795436;
  --color-accent:    #170d05;
  --color-accent-h:  #704a2b;
  --color-code-bg:   #efae6c;
  --color-selection: #e99f59;
  --color-link-underline: rgba(23, 13, 5, 0.22);
}