/* ==========================================================================
   JABER LAW — Design Tokens
   Ink (mass) · Parchment (light) · Brass (the rule), taken from the gold logo.
   Single source of truth for color, type, spacing, motion.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@400;500;700;900&family=Heebo:wght@200;300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* -- Palette ---------------------------------------------------------- */
  --ink-950: #0a0d13;
  --ink-900: #0f141c;
  --ink-850: #141a24;
  --ink-800: #1b2230;
  --ink-700: #273041;
  --ink-600: #36415a;
  --navy-700: #112a44;
  --navy-600: #183a5c;

  --parch-50: #fcfaf5;
  --parch-100: #f5f1e8;
  --parch-200: #e9e2d3;
  --parch-300: #d3c9b4;

  --brass-300: #dcc38f;
  --brass-400: #cdb27a;
  --brass-500: #b2924f;
  --brass-600: #8c6f3a;
  --brass-glow: rgba(205, 178, 122, 0.35);

  --slate-500: #6b7384;
  --slate-300: #aeb5c3;

  /* -- Semantic --------------------------------------------------------- */
  --bg: var(--ink-950);
  --bg-2: var(--ink-900);
  --bg-3: var(--ink-850);
  --bg-4: var(--ink-800);
  --bg-light: var(--parch-100);
  --bg-light-2: var(--parch-50);

  --fg: var(--parch-100);
  --fg-2: #b8b3a8;
  --fg-3: #7d786f;
  --fg-on-light: var(--navy-700);
  --fg-on-light-2: #4a4843;

  --accent: var(--brass-500);
  --accent-hi: var(--brass-400);

  --line: rgba(245, 241, 232, 0.1);
  --line-2: rgba(245, 241, 232, 0.18);
  --line-on-light: rgba(17, 42, 68, 0.12);

  --glass: rgba(15, 20, 28, 0.55);
  --glass-light: rgba(245, 241, 232, 0.06);

  /* -- Type ------------------------------------------------------------- */
  --font-sans: 'Heebo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Frank Ruhl Libre', 'David Libre', 'Heebo', serif;
  --font-grotesk: 'Space Grotesk', 'Heebo', sans-serif;
  --font-mono: 'Space Mono', 'Courier New', monospace;

  --t-display-xl: clamp(2.7rem, 6.6vw + 0.5rem, 6.8rem);
  --t-display-l: clamp(2.2rem, 4.4vw + 0.5rem, 4.6rem);
  --t-display-m: clamp(1.7rem, 2.5vw + 0.5rem, 2.9rem);
  --t-h3: clamp(1.2rem, 1.1vw + 0.7rem, 1.6rem);
  --t-lead: clamp(1.05rem, 0.5vw + 0.85rem, 1.28rem);
  --t-body: clamp(0.95rem, 0.2vw + 0.85rem, 1.05rem);
  --t-small: 0.85rem;
  --t-label: 0.72rem;
  --t-numeric: clamp(3rem, 6vw, 6rem);

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-base: 1.65;
  --lh-relaxed: 1.85;

  --ls-tight: -0.02em;
  --ls-wide: 0.12em;
  --ls-xwide: 0.24em;

  /* -- Space ------------------------------------------------------------ */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --s-9: 6.5rem; --s-10: 9rem;

  --section-y: clamp(4.5rem, 9vw, 9rem);
  --page-x: clamp(1.1rem, 4.5vw, 4rem);
  --max-w: 1380px;
  --max-w-narrow: 860px;
  --max-w-prose: 72ch;

  /* -- Shape ------------------------------------------------------------ */
  --r-xs: 4px; --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 30px; --r-pill: 999px;

  /* -- Elevation -------------------------------------------------------- */
  --sh-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --sh-md: 0 10px 30px -12px rgba(0, 0, 0, 0.55);
  --sh-lg: 0 30px 70px -30px rgba(0, 0, 0, 0.7);
  --sh-glow: 0 0 40px var(--brass-glow);

  /* -- Motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.83, 0, 0.17, 1);
  --d-fast: 180ms;
  --d-base: 360ms;
  --d-slow: 800ms;

  --header-h: 76px;
}