/* ============================================================
   Annota8 — Design Tokens
   Source of truth: DESIGN.md (annota8-brand). Night-first register.
   ============================================================ */
:root {
  /* Brand */
  --brand: #3F6FC8;            /* brand blue — from the logo, matches the hero grad-text (was indigo #6C63FF) */
  --brand-alt: #5BB8E8;        /* sky blue — logo gradient end (was teal #00D4AA) */
  --coral: #FF6B6B;            /* video / motion energy */
  --gold: #FFD700;             /* audio / premium */
  --ink: #0A0A0F;
  --shadow: #050508;
  --paper: #FAFAF8;
  --paper-alt: #F3F1EC;

  /* AA-safe text colors on the light register (#FAFAF8). Use for brand/teal
     TEXT that would fail WCAG on light backgrounds (eyebrows, pills, badges).
     Buttons that use --brand as a background are unaffected. */
  --brand-ink: #355BA8;        /* brand-blue text on light — 6.29:1 */
  --brand-ink-strong: #2B4C8C; /* brand-blue text on light, stronger — 8.05:1 */
  --teal-ink: #006B54;         /* green "live"/success text — darkened so it passes AA on green-tint badge bg too (badge--live 5.3:1) */

  /* DAY register (default) — exact values from live annota8.ai THEMES.day */
  --bg: #FAFAF8;
  --bg-alt: #F3F1EC;
  --fg: #0B0B0F;
  --fg2: #3D4361;
  --fg3: #6B7184;
  --rule: rgba(11,11,15,0.08);
  --card-border: rgba(11,11,15,0.08);
  --nav-bg: rgba(250,250,248,0.78);
  --cta-bg: #0B0B0F;
  --cta-fg: #ffffff;

  /* Day register (sections opt in via .register-day) */
  --day-bg: var(--paper);
  --day-bg-alt: var(--paper-alt);
  --day-fg: #0B0B0F;
  --day-fg2: #3D4361;
  --day-fg3: #6B7184;
  --day-rule: rgba(11,11,15,0.08);

  /* Modality accents */
  --m-text: var(--brand);
  --m-image: var(--brand-alt);
  --m-video: var(--coral);
  --m-audio: var(--gold);

  /* Semantic */
  --success: #00A88A;
  --danger: #D4443B;
  --warning: #DAA520;

  /* Type */
  --font-body: 'Geist', -apple-system, sans-serif;
  --font-display: 'Instrument Serif', Georgia, serif;
  --font-ui: 'Space Grotesk', 'Geist', sans-serif;
  --font-ar: 'IBM Plex Sans Arabic', 'Tajawal', sans-serif;

  --h1: clamp(2.6rem, 7.2vw, 5.4rem);
  --h2: clamp(2rem, 4.6vw, 3.4rem);
  --h3: clamp(1.25rem, 2.2vw, 1.6rem);
  --lead: clamp(1.05rem, 1.6vw, 1.3rem);
  --body: 1rem;
  --small: 0.875rem;
  --eyebrow: 0.78rem;

  /* Space */
  --s1: 0.5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2.5rem;
  --s5: 4rem;  --s6: 6.5rem; --s7: 10rem;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  /* Responsive content width: was a flat 1200px, which left big empty rails on
     wide screens (≈120px/side at 1440, ≈240px at 1680). Now it grows with the
     viewport (~4vw margin each side) up to a readable 1560px cap. Text blocks
     keep their own narrower max-widths (64ch / 820 / 920), so line length is unaffected. */
  --max: clamp(1200px, 92vw, 1560px);

  /* Radii / depth */
  --r-pill: 999px;
  --r-card: 16px;
  --r-screen: 12px;
  --shadow-card: 0 24px 60px rgba(11,11,15,0.14);
  --shadow-glow: 0 0 80px rgba(63,111,200,0.14);

  /* Motion — exact live-site values */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-entry: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-xs: 160ms;
  --dur-sm: 240ms;
  --dur-md: 420ms;
  --t-fast: var(--dur-xs);
  --t-med: var(--dur-md);
}

/* ============================================================
   RTL / Arabic font remap. Geist (--font-body) and Space Grotesk
   (--font-ui) have NO Arabic glyphs, so any Arabic rendered in them
   breaks cursive letter-joining. Redefining the tokens on the RTL
   root makes EVERY var(--font-body)/var(--font-ui) consumer resolve
   to the Arabic stack — one rule fixes it site-wide. (--font-display
   / Instrument Serif kept for the Latin-digit serif accents.)
   ============================================================ */
[dir="rtl"] {
  --font-body: 'IBM Plex Sans Arabic', 'Tajawal', sans-serif;
  --font-ui:   'IBM Plex Sans Arabic', 'Tajawal', sans-serif;
}
/* Latin letter-spacing breaks Arabic joining everywhere — zero it on RTL. */
[dir="rtl"] * { letter-spacing: 0 !important; }
/* Pull-quotes use Instrument Serif (kept Latin for the digit accents) — but it has
   no Arabic, so force the Arabic font on RTL blockquotes. */
[dir="rtl"] blockquote { font-family: var(--font-ar) !important; }
/* Arabic headings: cap weight at 600. IBM Plex Sans Arabic 700 isn't always loaded
   (Google Fonts weight subset / cache), and a FAUX-bold of a missing weight breaks
   Arabic cursive joining. 600 is reliably present + a better display weight for Arabic.
   RTL-only; English keeps its 700. !important beats the inline 700 on roadmap h2s. */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] .tools-engine__title, [dir="rtl"] .sx-h2, [dir="rtl"] .backers__title { font-weight: 600 !important; }