/* ─────────────────────────────────────────────────────────────────
   variables.css — edit tokens/design-tokens.json, then run:
   node scripts/sync-tokens.js
───────────────────────────────────────────────────────────────── */
:root {
  /* ── Colors ── */
  --color-bg:             #FFFFFF;
  --color-surface:        #F5F5F3;
  --color-surface-hover:  #EFEFED;
  --color-border:         #E8E8E4;
  --color-text-primary:   #0F0F0F;
  --color-text-secondary: #5A5A5A;
  --color-text-muted:     #9A9A9A;
  --color-accent:         #0F0F0F;
  --color-overlay-bg:     rgba(0, 0, 0, 0.88);

  /* ── Typography — families ── */
  --font-hero: 'EB Garamond', Georgia, serif;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;

  /* ── Typography — sizes ── */
  --text-xs:   0.75rem;
  --text-sm:   0.8125rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.75rem;
  --text-3xl:  2.25rem;
  --text-hero: clamp(2.2rem, 4.5vw, 3.75rem);

  /* ── Typography — weights ── */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ── Typography — line heights ── */
  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  /* ── Typography — letter spacing ── */
  --tracking-default: 0;
  --tracking-hero:    -0.01em;
  --tracking-label:   0.08em;
  --tracking-caption: 0.02em;

  /* ── Spacing ── */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* ── Layout ── */
  --sidebar-width: 200px;
  --content-pad:   var(--sp-12);

  /* ── Radii ── */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;

  /* ── Shadows ── */
  --shadow-modal: 0 24px 80px rgba(0,0,0,0.20);

  /* ── Transitions ── */
  --t-fast: 150ms ease;
  --t-base: 250ms ease;
  --t-slow: 400ms ease;
  --t-card: 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
