/**
 * tokens.css — canonical design tokens for sayid.ir.
 * Owns: colors, semantic theme colors, typography scale, spacing, radius,
 * motion, container widths, z-index. Nothing here renders anything by
 * itself; every other stylesheet consumes these custom properties. This is
 * the single source of truth — no page builder or parent theme sits
 * underneath this one to keep in sync with.
 */

:root {
  /* ---------- Brand ----------
     Confirmed live values (2026-08-19): primary/secondary/text updated
     from the original brief's placeholder brand colors to the site's
     actual global colors. */
  --color-yellow: #ffba20;
  --color-purple: #5851c0;
  --brand-gradient: linear-gradient(120deg, var(--color-yellow), var(--color-purple));

  /* ---------- Layout ---------- */
  --content-max: 1760px;
  --editorial-max: 48rem; /* ~40-55rem range from brief §26 */
  --gutter: clamp(20px, 4vw, 72px);

  /* ---------- Radius ---------- */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* ---------- Motion ---------- */
  --motion-fast: 160ms;
  --motion-normal: 280ms;
  --motion-slow: 600ms;
  --motion-ambient: 1800ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);

  /* ---------- Spacing (4px base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;

  /* ---------- Typography scale ---------- */
  --text-display: clamp(3.5rem, 5vw, 6rem);
  --text-h1: clamp(2.75rem, 4vw, 4.5rem);
  --text-h2: clamp(2.15rem, 3vw, 3.5rem);
  --text-h3: clamp(1.75rem, 2.1vw, 2.5rem);
  --text-large: clamp(1.125rem, 1.2vw, 1.5rem);
  --text-body: clamp(1rem, .95vw, 1.125rem);
  --text-small: .875rem;
  --leading-body: 1.8;
  --leading-heading: 1.2;

  /* ---------- Z-index layers ---------- */
  --z-header: 100;
  --z-scroll-cue: 20;
  --z-theme-switch: 20;

  /* ---------- Light theme (default) ---------- */
  --color-bg: #f7f8fb;
  --color-surface: #ffffff;
  --color-surface-subtle: #f1f3f7;
  --color-text: #262523;
  --color-text-muted: #667085;
  --color-border: rgba(19, 21, 26, .10);
  --color-border-strong: rgba(19, 21, 26, .18);
  --color-focus-ring: var(--color-purple);
}

/* ---------- Dark theme ---------- */
/* Applies when the OS prefers dark AND there is no manual override... */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #0b0c11;
    --color-surface: #12141b;
    --color-surface-subtle: #171a22;
    --color-text: #f6f7fa;
    --color-text-muted: #a7adbb;
    --color-border: rgba(255, 255, 255, .10);
    --color-border-strong: rgba(255, 255, 255, .18);
    --color-focus-ring: var(--color-yellow);
  }
}

/* ...or applies when a manual override is stored, regardless of OS setting. */
:root[data-theme="dark"] {
  --color-bg: #0b0c11;
  --color-surface: #12141b;
  --color-surface-subtle: #171a22;
  --color-text: #f6f7fa;
  --color-text-muted: #a7adbb;
  --color-border: rgba(255, 255, 255, .10);
  --color-border-strong: rgba(255, 255, 255, .18);
  --color-focus-ring: var(--color-yellow);
}

:root[data-theme="light"] {
  --color-bg: #f7f8fb;
  --color-surface: #ffffff;
  --color-surface-subtle: #f1f3f7;
  --color-text: #262523;
  --color-text-muted: #667085;
  --color-border: rgba(19, 21, 26, .10);
  --color-border-strong: rgba(19, 21, 26, .18);
  --color-focus-ring: var(--color-purple);
}