/* ============================================================
   Vellum — Design tokens
   Ink blue · cream · burnished copper
   Newsreader (display, italic in wordmark) + IBM Plex Sans (body)
   IBM Plex Sans Devanagari for Hindi; Noto Sans for Gurmukhi + Gujarati
   ============================================================ */

/* --- Web fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=IBM+Plex+Sans:wght@300;400;500;600&family=IBM+Plex+Sans+Devanagari:wght@300;400;500;600&family=Noto+Sans+Gurmukhi:wght@400;500;600&family=Noto+Sans+Gujarati:wght@400;500;600&display=swap');

/* ============================================================
   1. TOKENS — spacing, type scale, motion, palette, type families
   All on :root — no class needed.
   ============================================================ */
:root {
  /* Spacing — 4px base */
  --s-1: 2px;
  --s-2: 4px;
  --s-3: 6px;
  --s-4: 8px;
  --s-5: 12px;
  --s-6: 16px;
  --s-7: 20px;
  --s-8: 24px;
  --s-9: 32px;
  --s-10: 40px;
  --s-11: 56px;
  --s-12: 80px;

  /* Radii */
  --r-xs: 4px;   /* inputs, buttons, tags */
  --r-sm: 6px;   /* chips */
  --r-md: 8px;   /* cards */
  --r-lg: 12px;  /* modals, sheets */

  /* Border weights */
  --bw: 1px;

  /* Type scale (Latin) */
  --t-12: 12px;
  --t-13: 13px;
  --t-14: 14px;
  --t-15: 15px;
  --t-16: 16px;
  --t-18: 18px;
  --t-20: 20px;
  --t-24: 24px;
  --t-28: 28px;
  --t-32: 32px;
  --t-40: 40px;
  --t-56: 56px;

  /* Line heights */
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.5;
  --lh-indic: 1.65;
  --lh-loose: 1.7;

  /* Letter spacing */
  --ls-tight: -0.02em;
  --ls-snug: -0.01em;
  --ls-normal: 0;
  --ls-caps: 0.08em;

  /* Motion */
  --dur-fast: 120ms;
  --dur-base: 160ms;
  --dur-slow: 240ms;
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Z-layers */
  --z-nav: 10;
  --z-sticky: 20;
  --z-popover: 50;
  --z-modal: 100;
  --z-toast: 200;

  /* ---- Palette ---- */
  --canvas:        #F4EFE6;
  --canvas-2:      #FBF7EE;
  --canvas-sunk:   #EAE4D7;

  --fg-1:          #1A1714;
  --fg-2:          #5A544A;
  --fg-3:          #87806F;
  --fg-4:          #B5AC99;

  --border:        #DCD3BF;
  --border-strong: #C0B59B;

  --primary:       #1F2D4A;
  --primary-600:   #2A3D60;
  --primary-700:   #14213A;
  --primary-soft:  #E0E3EA;
  --on-primary:    #F4EFE6;

  --accent:        #A85A2F;
  --accent-soft:   #EFD9C8;

  --success:       #2F5F3F;
  --success-soft:  #DDE7D4;
  --warning:       #A86A1E;
  --warning-soft:  #F0DDB7;
  --error:         #8E3024;
  --error-soft:    #EBCDC4;
  --info:          #25497A;
  --info-soft:     #D7DDEB;

  --doc-ca-bg:     #DDE3D5;
  --doc-ca-fg:     #2D4934;
  --doc-in-bg:     #EFD8C6;
  --doc-in-fg:     #6E3B1C;

  --shadow-1: 0 1px 2px rgba(36, 28, 18, 0.04);
  --shadow-2: 0 4px 12px rgba(36, 28, 18, 0.07), 0 1px 3px rgba(36, 28, 18, 0.05);
  --shadow-3: 0 20px 50px rgba(36, 28, 18, 0.12), 0 4px 12px rgba(36, 28, 18, 0.06);

  --font-display: 'Newsreader', 'Source Serif 4', Georgia, serif;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --font-gu: 'Noto Sans Gurmukhi', sans-serif;
  --font-dv: 'IBM Plex Sans Devanagari', 'Noto Sans Devanagari', sans-serif;
  --font-gj: 'Noto Sans Gujarati', sans-serif;

  color-scheme: light;
}

/* ============================================================
   2. SEMANTIC ROLES — typography
   ============================================================ */
.h-display {
  font-family: var(--font-display);
  font-size: var(--t-56);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  font-weight: 500;
  color: var(--fg-1);
}
.h-1 {
  font-family: var(--font-display);
  font-size: var(--t-32);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-snug);
  font-weight: 500;
  color: var(--fg-1);
}
.h-2 {
  font-family: var(--font-display);
  font-size: var(--t-24);
  line-height: var(--lh-snug);
  font-weight: 500;
  color: var(--fg-1);
}
.h-3 {
  font-family: var(--font-body);
  font-size: var(--t-18);
  line-height: var(--lh-snug);
  font-weight: 600;
  color: var(--fg-1);
  letter-spacing: var(--ls-snug);
}
.h-section {
  font-family: var(--font-body);
  font-size: var(--t-12);
  line-height: var(--lh-snug);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--fg-3);
}
.body {
  font-family: var(--font-body);
  font-size: var(--t-14);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  font-weight: 400;
}
.body-lg {
  font-family: var(--font-body);
  font-size: var(--t-16);
  line-height: var(--lh-normal);
  color: var(--fg-1);
}
.body-sm {
  font-family: var(--font-body);
  font-size: var(--t-13);
  line-height: var(--lh-snug);
  color: var(--fg-2);
}
.meta {
  font-family: var(--font-body);
  font-size: var(--t-12);
  line-height: var(--lh-snug);
  color: var(--fg-3);
  font-variant-numeric: tabular-nums lining-nums;
}
.mono {
  font-family: var(--font-mono);
  font-size: var(--t-13);
  letter-spacing: 0;
}

/* Script-specific bodies — apply alongside .body */
.script-gu { font-family: var(--font-gu); line-height: var(--lh-indic); }
.script-dv { font-family: var(--font-dv); line-height: var(--lh-indic); }
.script-gj { font-family: var(--font-gj); line-height: var(--lh-indic); }

/* ============================================================
   3. ROOT DEFAULTS
   ============================================================ */
html, body {
  background: var(--canvas);
  color: var(--fg-1);
  font-family: var(--font-body, system-ui);
  font-size: var(--t-14);
  line-height: var(--lh-normal);
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Util: focus ring */
.focus-ring:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}