/* Design tokens — single source of truth for color, type, space, motion. */

:root {
  /* Surfaces */
  --bg-0:       #0A0C0F;
  --bg-1:       #10141A;
  --bg-2:       #171C24;
  --stroke:     rgba(255,255,255,0.08);
  --stroke-hi:  rgba(255,255,255,0.14);

  /* Text */
  --text-0:     #F5F7FA;
  --text-1:     #B8C0CC;
  --text-2:     #6B7280;

  /* Brand */
  --accent:     #25D366;
  --accent-hi:  #3BE57A;
  --accent-dim: rgba(37,211,102,0.12);
  --glow:       rgba(37,211,102,0.45);

  /* Channel accents — only used in channel-triad scene */
  --tg-blue:    #229ED9;
  --fb-blue:    #0084FF;

  /* Gradients */
  --grad-hero:   radial-gradient(1200px 600px at 50% 10%, rgba(37,211,102,0.22), transparent 60%);
  --grad-aurora: conic-gradient(from 180deg at 50% 50%, #25D366, #0A0C0F, #229ED9, #0A0C0F, #25D366);

  /* Spacing (4px base) */
  --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-9: 96px;  --s-10: 128px; --s-11: 192px;

  /* Radii */
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 20px; --r-pill: 999px;

  /* Shadows */
  --shadow-subtle: 0 1px 0 rgba(255,255,255,0.04) inset, 0 24px 48px -24px rgba(0,0,0,0.8);
  --shadow-bloom:  0 0 80px -10px var(--glow);

  /* Typography */
  --font-sans-en:    'Inter', system-ui, -apple-system, sans-serif;
  --font-sans-ar:    'IBM Plex Sans Arabic', 'Noto Kufi Arabic', 'Tajawal', sans-serif;
  --font-display-en: 'Inter', sans-serif;
  --font-display-ar: 'IBM Plex Sans Arabic', sans-serif;
  --font-mono:       'JetBrains Mono', ui-monospace, monospace;

  --font-sans:    var(--font-sans-en);
  --font-display: var(--font-display-en);

  /* Type scale */
  --fs-display-1: 96px;
  --fs-display-2: 72px;
  --fs-display-3: 56px;
  --fs-display-4: 44px;
  --fs-h1: 36px;
  --fs-h2: 28px;
  --fs-h3: 22px;
  --fs-body-lg: 18px;
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --fs-micro: 12px;

  /* Motion */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro:  120ms;
  --dur-sm:     240ms;
  --dur-md:     480ms;
  --dur-lg:     800ms;
  --dur-xl:     1200ms;

  /* Layout */
  --container: 1280px;
  --gutter:    24px;
  --nav-h:     72px;
}

/* Arabic locale swaps font variables only */
html[lang="ar"] {
  --font-sans:    var(--font-sans-ar);
  --font-display: var(--font-display-ar);
}

/* Responsive type scale */
@media (max-width: 900px) {
  :root {
    --fs-display-1: 56px;
    --fs-display-2: 48px;
    --fs-display-3: 40px;
    --fs-display-4: 32px;
    --fs-h1: 28px;
    --fs-h2: 22px;
    --fs-body-lg: 17px;
  }
}