/* ==========================================================================
   MA Learn Editorial Atelier — canonical tokens
   Single source of truth. All pages + primitives consume these vars.
   Never redeclared at page scope.
   ========================================================================== */

/* ── Brand display font (Gumela Arabic) — for loaders, brand marks ── */
@font-face {
  font-family: 'Gumela Arabic';
  src: url('../fonts/gumela-arabic-light.otf') format('opentype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gumela Arabic';
  src: url('../fonts/gumela-arabic-regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gumela Arabic';
  src: url('../fonts/gumela-arabic-bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* Brand — gold as editorial ink */
  --c-gold:          oklch(0.74 0.12 82);
  --c-gold-bright:   oklch(0.82 0.13 85);
  --c-gold-dim:      oklch(0.58 0.09 82);
  --c-gold-faint:    oklch(0.74 0.12 82 / 0.10);

  /* Surfaces — neutrals pulled slightly toward gold hue at very low chroma */
  --c-ink-0:         oklch(0.08 0.003 82);
  --c-ink-1:         oklch(0.11 0.004 82);
  --c-ink-2:         oklch(0.14 0.005 82);
  --c-ink-3:         oklch(0.18 0.006 82);
  --c-ink-4:         oklch(0.23 0.006 82);
  --c-ink-5:         oklch(0.30 0.007 82);

  /* Text */
  --c-fg:            oklch(0.96 0.006 82);
  --c-fg-2:          oklch(0.80 0.008 82);
  --c-fg-3:          oklch(0.62 0.009 82);
  --c-fg-4:          oklch(0.48 0.008 82);

  /* Semantic — muted to harmonize with gold */
  --c-success:       oklch(0.74 0.11 150);
  --c-success-bg:    oklch(0.74 0.11 150 / 0.14);
  --c-warning:       oklch(0.77 0.12 78);
  --c-warning-bg:    oklch(0.77 0.12 78 / 0.16);
  --c-danger:        oklch(0.68 0.14 28);
  --c-danger-bg:     oklch(0.68 0.14 28 / 0.16);

  /* Spacing — 8pt baseline */
  --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-page-x: clamp(16px, 3vw, 40px);

  /* Radius */
  --r-xs: 4px;  --r-sm: 6px;  --r-md: 10px;
  --r-lg: 14px; --r-xl: 20px; --r-pill: 9999px;

  /* Elevation */
  --e-card:   0 1px 2px rgba(0,0,0,0.4), 0 0 0 1px oklch(0.25 0.006 82 / 0.5);
  --e-raised: 0 8px 24px rgba(0,0,0,0.5), 0 0 0 1px oklch(0.30 0.007 82 / 0.6);
  --e-modal:  0 24px 64px rgba(0,0,0,0.7), 0 0 0 1px oklch(0.35 0.008 82 / 0.7);
  --e-focus:  0 0 0 2px oklch(0.74 0.12 82 / 0.35);

  /* Motion */
  --dur-fast: 150ms; --dur-med: 220ms; --dur-slow: 320ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:  cubic-bezier(0.64, 0, 0.78, 0);

  /* Typography — Cairo used editorially, Gumela Arabic for brand marks/loaders */
  --font-sans: 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Gumela Arabic', 'Cairo', -apple-system, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --fs-display-xl: clamp(48px, 6vw, 72px);
  --fs-display-l:  clamp(32px, 4vw, 48px);
  --fs-h1:         clamp(24px, 3vw, 32px);
  --fs-h2:         20px;
  --fs-h3:         16px;
  --fs-body:       16px;
  --fs-body-sm:    14px;
  --fs-label:      12px;
  --fs-mono:       13px;
}

/* Reduced motion: collapse non-essential durations (fades keep working) */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; --dur-med: 1ms; --dur-slow: 1ms; }
}

/* Base reset — minimal, honors the tokens */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--c-ink-0);
  color: var(--c-fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; line-height: 1.2; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--c-gold-bright); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-color: var(--c-gold); text-underline-offset: 3px; }

/* Tabular numerals helper */
.tnum { font-variant-numeric: tabular-nums; }

/* Gold editorial hairline — used as section dividers */
.gold-rule { border: 0; border-top: 0.5px solid var(--c-gold-dim); opacity: 0.6; }