/* =========================================================
   VARIABLES.CSS — Design Tokens
   Editorial rave/techno poster system.
   60% neutral / 30% grey structure / 10% rare accent.
   ========================================================= */

:root {
  /* ---- 60% Neutral base ---- */
  --c-paper: #F7F7F5;      /* light mode background */
  --c-ink: #0B0B0C;        /* dark mode background */

  /* ---- 30% Grey structure ---- */
  --c-grey-100: #8A8A8E;
  --c-grey-300: #3A3A3D;
  --c-grey-500: #1A1A1C;

  /* ---- 10% Rare accent (never together) ---- */
  --c-accent-blue: #2F55FF;
  --c-accent-yellow: #FFC93C;

  /* ---- Semantic (Light mode default) ---- */
  --bg: var(--c-paper);
  --bg-elevated: #FFFFFF;
  --fg: var(--c-ink);
  --fg-muted: var(--c-grey-300);
  --fg-faint: var(--c-grey-100);
  --border: rgba(11, 11, 12, 0.12);
  --border-strong: rgba(11, 11, 12, 0.28);
  --accent: var(--c-accent-blue);
  --glow: rgba(47, 85, 255, 0.16);
  --overlay: rgba(11, 11, 12, 0.04);

  /* ---- Brand mark colors (sampled from logo) ---- */
  --logo-dot: #F4C60E;
  --logo-comma: #00DDF9;
  --logo-shape-opacity: 0.7;

  /* ---- Typography ---- */
  --font-display-en: "Anton", "Archivo Black", sans-serif;
  --font-display-ar: "Tajawal", sans-serif;
  --font-body-en: "Poppins", sans-serif;
  --font-body-ar: "Tajawal", sans-serif;
  --font-ui-en: "Poppins", sans-serif;
  --font-ui-ar: "Tajawal", sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  --fs-hero: clamp(3.4rem, 10vw, 9.5rem);
  --fs-h1: clamp(2.4rem, 6vw, 5rem);
  --fs-h2: clamp(1.8rem, 4vw, 3rem);
  --fs-h3: clamp(1.3rem, 2.4vw, 1.8rem);
  --fs-body: clamp(1rem, 1.1vw, 1.125rem);
  --fs-small: 0.8125rem;
  --fs-micro: 0.6875rem;

  --lh-tight: 0.92;
  --ls-tight: -0.02em;
  --ls-eyebrow: 0.22em;

  /* ---- Layout ---- */
  --container: 1320px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius-pill: 999px;
  --radius-card: 4px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.2s;
  --dur-mid: 0.45s;
  --dur-slow: 0.9s;
  --dur-mood: 0.9s;

  /* ---- Z ---- */
  --z-cursor: 9999;
  --z-nav: 500;
  --z-preloader: 9000;
}

[data-theme="dark"] {
  --bg: var(--c-ink);
  --bg-elevated: #131315;
  --fg: var(--c-paper);
  --fg-muted: var(--c-grey-100);
  --fg-faint: var(--c-grey-300);
  --border: rgba(247, 247, 245, 0.14);
  --border-strong: rgba(247, 247, 245, 0.3);
  --overlay: rgba(247, 247, 245, 0.05);
  --glow: rgba(47, 85, 255, 0.24);
}

[lang="ar"] {
  --font-display: var(--font-display-ar);
  --font-body: var(--font-body-ar);
  --font-ui: var(--font-ui-ar);
  --ls-tight: 0em;
  --ls-eyebrow: 0.08em;
}

[lang="en"] {
  --font-display: var(--font-display-en);
  --font-body: var(--font-body-en);
  --font-ui: var(--font-ui-en);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.001s;
    --dur-mid: 0.001s;
    --dur-slow: 0.001s;
    --dur-mood: 0.001s;
  }
}