/* ==========================================================================
   tokens.css — design tokens (colors, type scale, spacing, radii, shadows)
   Single source of truth. No selectors that paint UI live here.
   ========================================================================== */

:root {
  /* ---------- Color: surfaces (obsidian) ---------- */
  --c-bg:        #0a0c10;
  --c-elev:      #0e1118;
  --c-surface:   #131722;
  --c-surface-2: #1a2030;
  --c-ink:       #edeae3;
  --c-ink-dim:   #b9bfc9;
  --c-muted:     #828b99;
  --c-line:      rgba(237, 234, 227, .08);
  --c-line-2:    rgba(237, 234, 227, .16);

  /* ---------- Color: brand (brass/gold) ---------- */
  --c-gold:      #cba553;
  --c-gold-hi:   #ecd28a;
  --c-gold-lo:   #96762f;
  --c-gold-soft: rgba(203, 165, 83, .10);
  --c-gold-line: rgba(203, 165, 83, .38);
  --c-on-gold:   #171204;

  /* ---------- Color: status ---------- */
  --c-ok:        #58c98c;

  /* ---------- Gradients ---------- */
  --grad-gold: linear-gradient(115deg,
      var(--c-gold-lo) 0%, var(--c-gold) 32%,
      var(--c-gold-hi) 50%,
      var(--c-gold) 68%, var(--c-gold-lo) 100%);
  --grad-surface: linear-gradient(180deg, var(--c-surface) 0%, var(--c-elev) 100%);

  /* ---------- Typography ---------- */
  --font-body: 'IBM Plex Sans Arabic', 'IBM Plex Sans', 'Segoe UI', Tahoma, Arial, sans-serif;
  --font-latin: 'IBM Plex Sans', 'IBM Plex Sans Arabic', 'Segoe UI', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Menlo, Consolas, monospace;

  --fs-xs:    .8rem;
  --fs-sm:    .92rem;
  --fs-base:  1.0625rem;
  --fs-lg:    1.2rem;
  --fs-h2:    clamp(1.85rem, 4.2vw, 2.75rem);
  --fs-hero:  clamp(2.7rem, 8vw, 5.25rem);
  --fs-mega:  clamp(2.1rem, 5.2vw, 3.5rem);

  --lh-tight: 1.25;
  --lh-body:  1.8;
  --tr-latin: .04em;

  /* ---------- Spacing ---------- */
  --pad-section: clamp(4.5rem, 9vw, 7.5rem);
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --container: 1160px;

  /* ---------- Radii ---------- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-pill: 999px;

  /* ---------- Shadows ---------- */
  --sh-card: 0 18px 44px rgba(2, 4, 8, .5);
  --sh-gold: 0 18px 48px rgba(203, 165, 83, .14);
  --sh-btn:  0 10px 28px rgba(203, 165, 83, .28);

  /* ---------- Motion ---------- */
  --e-out: cubic-bezier(.22, 1, .36, 1);
  --t-1: .18s;
  --t-2: .38s;
  --t-3: .75s;

  /* ---------- Layout ---------- */
  --header-h: 76px;
}