/* Font faces — Saira Semi Condensed (self-hosted) */
@font-face {
   font-family: 'Saira Semi Condensed';
   src: url('/assets/fonts/sairasemicondensed-regular-webfont.woff2') format('woff2'),
      url('/assets/fonts/sairasemicondensed-regular-webfont.woff') format('woff');
   font-weight: 400;
   font-display: fallback;
}

@font-face {
   font-family: 'Saira Semi Condensed';
   src: url('/assets/fonts/sairasemicondensed-semibold-webfont.woff2') format('woff2'),
      url('/assets/fonts/sairasemicondensed-semibold-webfont.woff') format('woff');
   font-weight: 600;
   font-display: fallback;
}

@font-face {
   font-family: 'Saira Semi Condensed';
   src: url('/assets/fonts/sairasemicondensed-bold-webfont.woff2') format('woff2'),
      url('/assets/fonts/sairasemicondensed-bold-webfont.woff') format('woff');
   font-weight: 700;
   font-display: fallback;
}

@font-face {
   font-family: 'Saira Semi Condensed';
   src: url('/assets/fonts/sairasemicondensed-black-webfont.woff2') format('woff2'),
      url('/assets/fonts/sairasemicondensed-black-webfont.woff') format('woff');
   font-weight: 900;
   font-display: fallback;
}

/* ── Design tokens — dark-first ─────────────────────────────── */

:root,
[data-theme="dark"] {
   /* Surfaces */
   --bg-base: #0e0b12;
   --bg-raised: #13131e;
   --bg-hover: #1a1a28;
   --bg-overlay: #1a1a28;
   --bg-muted: #1f1f2e;
   --bg-surface: #1a1a28;

   --bg-subtle: rgba(255, 255, 255, 0.05);

   /* Borders */
   --border: rgba(255, 255, 255, 0.07);
   --border-strong: rgba(255, 255, 255, 0.14);
   --border-accent: rgba(180, 26, 215, 0.4);

   /* Text */
   --text-title: #f8f1f9;
   --text-primary: #cfcfd9;
   --text-secondary: #bababd;
   --text-lead: #b8b8c0;
   --text-muted: #82829a;
   --text-inverted: #0d0d14;
   --text-button: #fff;

   --clr-always-white: #fff;

   --icon-muted: #82829a;

   /* Accent */
   --clr-accent: #a62bd0;
   --clr-accent-light: #d83bfb;
   --clr-accent-dark: #8a0fa6;
   --clr-accent-glow: rgba(180, 26, 215, 0.45);

   /* Semantic */
   --clr-success: #22c55e;
   --clr-warning: #f59e0b;
   --clr-error: #ef4444;
   --clr-info: #3b82f6;

   /* Badge surfaces */
   --badge-accent-text: var(--clr-accent-light);
   --badge-accent-bg: rgba(180, 26, 215, 0.22);
   --badge-accent-border: rgba(180, 26, 215, 0.45);
   --badge-success-bg: rgba(34, 197, 94, 0.2);
   --badge-success-border: rgba(34, 197, 94, 0.42);
   --badge-warning-bg: rgba(245, 158, 11, 0.2);
   --badge-warning-border: rgba(245, 158, 11, 0.42);
   --badge-error-bg: rgba(239, 68, 68, 0.2);
   --badge-error-border: rgba(239, 68, 68, 0.42);

   /* Interactive tint */
   --clr-accent-subtle: rgba(180, 26, 215, 0.08);
   --clr-accent-subtle-solid: var(--bg-muted);

   /* Nav */
   --nav-bg: rgba(14, 13, 20, 0.85);
   --nav-bg-scrolled: rgba(31, 27, 45, 0.8);
   --nav-timeline-bg: rgba(31, 27, 45, 0.6);
   --nav-link-selected-bg: rgba(157, 144, 160, 0.24);
   --nav-link-pressed-bg: rgba(45, 41, 47, 0.34);

   /* Shadows */
   --shadow-sm: none;
   --shadow-md: none;
   --shadow-lg: none;
   --shadow-accent: 0 0 20px var(--clr-accent-glow);
}

[data-theme="light"] {
   --bg-base: #f3f2f5;
   --bg-raised: #fafafa;
   --bg-hover: #fff;
   --bg-overlay: #f5f5fc;
   --bg-muted: #e5e5ee;
   --bg-surface: #ededf5;
   --bg-subtle: rgba(0, 0, 0, 0.04);

   --border: rgba(0, 0, 0, 0.08);
   --border-strong: rgba(0, 0, 0, 0.16);
   --border-accent: rgba(180, 26, 215, 0.35);

   --text-title: #1a161a;
   --text-primary: #1e1e20;
   --text-secondary: #454548;
   --text-lead: #2c2c2f;
   --text-muted: #69697e;
   --text-inverted: #f0f0f4;
   --text-button: #fff;

   --clr-always-white: #fff;

   --icon-muted: #838388;

   --clr-accent: #9900cc;
   --clr-accent-light: #b41ad7;
   --clr-accent-dark: #760099;
   --clr-accent-glow: rgba(153, 0, 204, 0.25);

   /* Semantic — darker for contrast on light bg */
   --clr-success: #16a34a;
   --clr-warning: #b45309;
   --clr-error: #dc2626;
   --clr-info: #1d4ed8;

   /* Badge surfaces */
   --badge-accent-text: var(--clr-accent);
   --badge-accent-bg: rgba(153, 0, 204, 0.09);
   --badge-accent-border: rgba(153, 0, 204, 0.22);
   --badge-success-bg: rgba(22, 163, 74, 0.1);
   --badge-success-border: rgba(22, 163, 74, 0.25);
   --badge-warning-bg: rgba(180, 83, 9, 0.1);
   --badge-warning-border: rgba(180, 83, 9, 0.25);
   --badge-error-bg: rgba(220, 38, 38, 0.09);
   --badge-error-border: rgba(220, 38, 38, 0.22);

   /* Interactive tint */
   --clr-accent-subtle: rgba(153, 0, 204, 0.06);
   --clr-accent-subtle-solid: var(--bg-muted);

   --nav-bg: rgba(255, 255, 255, 0.7);
   --nav-bg-scrolled: rgba(255, 255, 255, 0.7);
   --nav-timeline-bg: rgba(255, 255, 255, 0.6);
   --nav-link-selected-bg: rgba(118, 0, 153, 0.11);
   --nav-link-pressed-bg: rgba(145, 132, 149, 0.18);

   --shadow-sm: 0 1px 3px rgba(22, 22, 22, 0.08);
   --shadow-md: 0 4px 8px rgba(29, 29, 29, 0.12);
   --shadow-lg: 0 8px 12px rgba(22, 22, 22, 0.12);
   --shadow-accent: 0 0 20px var(--clr-accent-glow);
}

/* ── Spacing scale ───────────────────────────────────────────── */
:root {
   --sp-1: 0.25rem;
   --sp-2: 0.5rem;
   --sp-3: 0.75rem;
   --sp-4: 1rem;
   --sp-5: 1.25rem;
   --sp-6: 1.5rem;
   --sp-8: 2rem;
   --sp-10: 2.5rem;
   --sp-12: 3rem;
   --sp-16: 4rem;
   --sp-20: 5rem;
   --sp-24: 6rem;
   --sp-32: 8rem;

   /* Typography */
   --ff-heading: 'Saira Semi Condensed', sans-serif;
   --ff-button: 'Saira Semi Condensed', sans-serif;
   --ff-body: 'Inter', system-ui, sans-serif;

   --fs-xs: 0.75rem;
   --fs-sm: 0.875rem;
   --fs-base: 1rem;
   --fs-lg: 1.125rem;
   --fs-xl: 1.25rem;
   --fs-2xl: 1.5rem;
   --fs-3xl: 1.875rem;
   --fs-4xl: 2.25rem;
   --fs-5xl: 3rem;
   --fs-6xl: 3.75rem;
   --fs-7xl: 4.5rem;
   --fs-8xl: 6rem;

   /* Radii */
   --radius-sm: 4px;
   --radius-md: 8px;
   --radius-lg: 12px;
   --radius-xl: 16px;

   /* Transitions */
   --ease: cubic-bezier(0.4, 0, 0.2, 1);
   --duration-fast: 150ms;
   --duration-normal: 250ms;
   --duration-slow: 400ms;

   /* Layout */
   --container-max: 1200px;
   --container-pad: clamp(1rem, 4vw, 3rem);
}