/* ═══════════════════════════════════════════════════════════════
   SK RIYAZ — DESIGN TOKENS · "Obsidian Aurora"
   Dark: deep obsidian ink, aurora gradients breathing underneath.
   Light: warm porcelain, the same aurora at whisper opacity.
   Every color in the system lives here — no raw hex in components.
   ═══════════════════════════════════════════════════════════════ */

/* ── Fonts (variable, self-hosted) ── */
@font-face {
  font-family: 'Clash Display';
  src: url('../fonts/ClashDisplay-Variable.woff2') format('woff2');
  font-weight: 200 700;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Variable.woff2') format('woff2');
  font-weight: 300 900;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-VariableItalic.woff2') format('woff2');
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Anton';
  src: url('../fonts/Anton.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

:root {
  /* ── Typography ── */
  --font-display: 'Clash Display', 'Segoe UI', system-ui, sans-serif;
  --font-condensed: 'Anton', 'Arial Narrow', system-ui, sans-serif; /* mega numerals & poster headings */
  --font-body: 'Satoshi', 'Segoe UI', system-ui, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', 'JetBrains Mono', Consolas, monospace;

  /* Fluid type scale — clamps from 360px to 1440px viewport */
  --text-xs:   clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --text-sm:   clamp(0.84rem, 0.81rem + 0.13vw, 0.92rem);
  --text-base: clamp(0.98rem, 0.94rem + 0.18vw, 1.09rem);
  --text-md:   clamp(1.12rem, 1.06rem + 0.28vw, 1.30rem);
  --text-lg:   clamp(1.35rem, 1.24rem + 0.48vw, 1.66rem);
  --text-xl:   clamp(1.72rem, 1.52rem + 0.90vw, 2.30rem);
  --text-2xl:  clamp(2.20rem, 1.86rem + 1.52vw, 3.18rem);
  --text-3xl:  clamp(2.80rem, 2.24rem + 2.50vw, 4.40rem);
  --text-hero: clamp(3.40rem, 2.40rem + 4.50vw, 6.30rem);

  /* ── Spacing (8px rhythm) ── */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.5rem;   --space-6: 2rem;
  --space-7: 3rem;     --space-8: 4.5rem;   --space-9: 6.5rem;
  --space-section: clamp(4.5rem, 3rem + 7vw, 9rem);
  --container: 1200px;
  --container-wide: 1400px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* ── Radius ── */
  --radius-sm: 8px;  --radius-md: 14px;  --radius-lg: 22px;
  --radius-xl: 32px; --radius-full: 999px;

  /* ── Motion ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);       /* expo-out: reveals */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* playful overshoot */
  --dur-fast: 180ms;
  --dur-med: 420ms;
  --dur-slow: 900ms;

  /* ── Ember & Azure accent scale (theme-independent) ──
     Derived from the hero footage: warm orange/red key light meeting
     cool blue fill shadows over a deep navy floor. */
  --flare: #ff8a3c;        /* ember orange — key light */
  --flare-deep: #ee621c;
  --rose: #ff5f6d;         /* the warm-to-cool crossover */
  --azure: #4d9fff;        /* blue fill light */
  --azure-deep: #2f6bff;
  --amber: #ffb454;
  --aurora: linear-gradient(115deg, var(--flare) 0%, var(--rose) 45%, var(--azure) 100%);
  --aurora-soft: linear-gradient(115deg, #ff8a3c66, #ff5f6d66 45%, #4d9fff66);
  /* Gradient used for text — overridden per theme for contrast */
  --aurora-ink: var(--aurora);

  --z-nav: 100;
  --z-modal: 200;
  --z-cursor: 300;
  --z-loader: 400;
}

/* ═══ DARK (default) — Obsidian ═══ */
:root,
:root[data-theme='dark'] {
  color-scheme: dark;

  --bg-0: #05070f;          /* page floor — deep navy, matches footage */
  --bg-1: #090d1a;          /* section alternation */
  --bg-2: #0e1424;          /* raised surface */
  --surface: rgba(255, 255, 255, 0.035);       /* glass card fill */
  --surface-hover: rgba(255, 255, 255, 0.065);
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);

  --text-primary: #f2f4fb;
  --text-secondary: #a8b0c3;
  --text-muted: #626b80;

  --accent: var(--flare);
  --accent-contrast: #ffffff;
  --success: #34d399;
  --danger: #f87171;

  --glow-accent: 0 0 44px rgba(255, 138, 60, 0.32);
  --shadow-card: 0 18px 50px -18px rgba(0, 0, 0, 0.65);
  --shadow-float: 0 30px 80px -20px rgba(0, 0, 0, 0.75);

  --noise-opacity: 0.05;
  --aurora-opacity: 0.5;    /* background mesh visibility */
  --glass-blur: 18px;
}

/* ═══ LIGHT — Porcelain ═══ */
:root[data-theme='light'] {
  color-scheme: light;

  --bg-0: #f5f4f0;
  --bg-1: #edecf3;
  --bg-2: #ffffff;
  --surface: rgba(255, 255, 255, 0.85);
  --surface-hover: #ffffff;
  --border: rgba(28, 30, 48, 0.12);
  --border-strong: rgba(28, 30, 48, 0.22);

  --text-primary: #16182a;
  --text-secondary: #464d63;
  --text-muted: #7d8398;

  --accent: #c2410c;       /* deep ember — readable on porcelain */
  --accent-contrast: #ffffff;
  --success: #0d9b6c;
  --danger: #dc2626;

  /* Deeper stops so gradient text stays readable on porcelain */
  --aurora-ink: linear-gradient(115deg, #d95513 0%, #d92d47 45%, #1d5fd6 100%);

  --glow-accent: 0 10px 34px rgba(217, 85, 19, 0.22);
  --shadow-card: 0 10px 34px -12px rgba(30, 32, 60, 0.16), 0 2px 8px rgba(30, 32, 60, 0.07);
  --shadow-float: 0 30px 70px -24px rgba(30, 32, 50, 0.28);

  --noise-opacity: 0.028;
  --aurora-opacity: 0.30;
  --glass-blur: 22px;
}