/* ============================================================
   Nyx Design System — Tokens
   Dark-first. Glass-heavy. Violet/magenta accents.
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/Inter-Variable.woff2") format("woff2-variations"),
       url("../fonts/Inter-Variable.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("../fonts/JetBrainsMono-Variable.woff2") format("woff2-variations"),
       url("../fonts/JetBrainsMono-Variable.woff2") format("woff2");
}

:root {
  /* ============= Color — Backgrounds ============= */
  --bg-0: #0a0a0f;        /* deepest — app shell */
  --bg-1: #0f0f15;        /* slightly raised — input fills */
  --bg-2: #12121a;        /* raised — cards (solid fallback) */
  --bg-3: #1a1a25;        /* hover surfaces */

  /* ============= Color — Foregrounds ============= */
  --fg-1: #f5f5f7;        /* primary text */
  --fg-2: #a1a1aa;        /* secondary text */
  --fg-3: #71717a;        /* tertiary / disabled */
  --fg-4: #52525b;        /* placeholders, watermarks */

  /* ============= Color — Accents ============= */
  --violet-300: #c4b5fd;
  --violet-400: #a78bfa;
  --violet-500: #8b5cf6;  /* primary accent */
  --violet-600: #7c3aed;
  --violet-700: #6d28d9;

  --magenta-300: #f0abfc;
  --magenta-400: #e879f9;
  --magenta-500: #d946ef;  /* secondary accent */
  --magenta-600: #c026d3;
  --magenta-700: #a21caf;

  /* ============= Color — Semantic ============= */
  --success-500: #10b981;
  --success-glow: rgba(16, 185, 129, 0.3);
  --success-bg: rgba(16, 185, 129, 0.12);

  --warning-500: #f59e0b;
  --warning-glow: rgba(245, 158, 11, 0.3);
  --warning-bg: rgba(245, 158, 11, 0.12);

  --danger-500: #ef4444;
  --danger-glow: rgba(239, 68, 68, 0.3);
  --danger-bg: rgba(239, 68, 68, 0.12);

  --info-500: #38bdf8;
  --info-glow: rgba(56, 189, 248, 0.3);
  --info-bg: rgba(56, 189, 248, 0.12);

  /* ============= Color — Borders ============= */
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.12);
  --border-emphasis: rgba(255, 255, 255, 0.16);
  --border-violet: rgba(139, 92, 246, 0.4);
  --border-magenta: rgba(217, 70, 239, 0.4);

  /* ============= Glass — Materials ============= */
  --glass-thin-bg: rgba(18, 18, 26, 0.4);
  --glass-thin-blur: blur(12px) saturate(140%);

  --glass-bg: rgba(18, 18, 26, 0.6);
  --glass-blur: blur(20px) saturate(140%);

  --glass-thick-bg: rgba(10, 10, 15, 0.7);
  --glass-thick-blur: blur(32px) saturate(140%);

  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --glass-highlight-strong: inset 0 1px 0 rgba(255, 255, 255, 0.10);

  /* ============= Gradients ============= */
  --gradient-brand: linear-gradient(135deg, #8b5cf6 0%, #d946ef 100%);
  --gradient-brand-soft: linear-gradient(135deg, rgba(139,92,246,0.6) 0%, rgba(217,70,239,0.6) 100%);
  --gradient-surface-light: linear-gradient(180deg, rgba(255,255,255,0.04), transparent 60%);
  --gradient-canvas: radial-gradient(circle at 0% 0%, rgba(139,92,246,0.12), transparent 60%),
                     radial-gradient(circle at 100% 100%, rgba(217,70,239,0.10), transparent 60%);

  /* ============= Shadows ============= */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.6);

  --glow-violet: 0 0 24px rgba(139, 92, 246, 0.25);
  --glow-violet-strong: 0 0 32px rgba(139, 92, 246, 0.4);
  --glow-magenta: 0 0 24px rgba(217, 70, 239, 0.25);
  --glow-brand: 0 0 32px rgba(139, 92, 246, 0.3), 0 0 48px rgba(217, 70, 239, 0.15);

  --focus-ring: 0 0 0 2px rgba(139, 92, 246, 0.5), 0 0 24px rgba(139, 92, 246, 0.3);

  /* ============= Spacing (4px base) ============= */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* ============= Radii ============= */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;       /* buttons, inputs */
  --radius-lg: 16px;       /* small cards, popovers */
  --radius-xl: 20px;       /* cards, panels */
  --radius-2xl: 28px;      /* hero surfaces, modals */
  --radius-full: 999px;

  /* ============= Type — families ============= */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Fira Code", Menlo, Consolas, monospace;
  --font-display: "Inter", -apple-system, "SF Pro Display", sans-serif;

  /* ============= Type — scale ============= */
  --text-display: 64px;
  --text-h1: 44px;
  --text-h2: 30px;
  --text-h3: 21px;
  --text-body: 15px;
  --text-body-sm: 14px;
  --text-label: 13px;
  --text-caption: 12px;
  --text-eyebrow: 11px;
  --text-mono: 14px;
  --text-mono-sm: 13px;

  /* ============= Type — weights ============= */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ============= Type — leading ============= */
  --leading-display: 1.0;
  --leading-h1: 1.05;
  --leading-h2: 1.15;
  --leading-h3: 1.25;
  --leading-body: 1.55;
  --leading-tight: 1.35;

  /* ============= Type — tracking ============= */
  --track-display: -0.03em;
  --track-h1: -0.025em;
  --track-h2: -0.02em;
  --track-h3: -0.01em;
  --track-body: 0;
  --track-eyebrow: 0.08em;

  /* ============= Motion ============= */
  --ease-out-quart: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-emphasized: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.6, 1);

  --duration-fast: 200ms;
  --duration-base: 300ms;
  --duration-slow: 400ms;
  --duration-slower: 500ms;

  /* ============= Layers ============= */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-overlay: 1000;
  --z-modal: 2000;
  --z-toast: 3000;
}

/* ============= Semantic typography utilities ============= */
.nyx-display {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-display);
  letter-spacing: var(--track-display);
  color: var(--fg-1);
}
.nyx-h1 {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-h1);
  letter-spacing: var(--track-h1);
  color: var(--fg-1);
}
.nyx-h2 {
  font-family: var(--font-sans);
  font-size: var(--text-h2);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-h2);
  letter-spacing: var(--track-h2);
  color: var(--fg-1);
}
.nyx-h3 {
  font-family: var(--font-sans);
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-h3);
  letter-spacing: var(--track-h3);
  color: var(--fg-1);
}
.nyx-body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  color: var(--fg-1);
}
.nyx-body-secondary {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  color: var(--fg-2);
}
.nyx-label {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  color: var(--fg-1);
}
.nyx-caption {
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  color: var(--fg-2);
}
.nyx-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-semibold);
  line-height: 1;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
}
.nyx-mono {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: var(--weight-regular);
  line-height: 1.5;
  font-feature-settings: "tnum" 1, "calt" 0;
  color: var(--fg-1);
}
.nyx-numeric {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ============= Glass surfaces ============= */
.nyx-glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border-default);
  box-shadow: var(--glass-highlight), var(--shadow-md);
  border-radius: var(--radius-xl);
}
.nyx-glass-thick {
  background: var(--glass-thick-bg);
  backdrop-filter: var(--glass-thick-blur);
  -webkit-backdrop-filter: var(--glass-thick-blur);
  border: 1px solid var(--border-default);
  box-shadow: var(--glass-highlight), var(--shadow-lg);
  border-radius: var(--radius-xl);
}
.nyx-glass-thin {
  background: var(--glass-thin-bg);
  backdrop-filter: var(--glass-thin-blur);
  -webkit-backdrop-filter: var(--glass-thin-blur);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--glass-highlight), var(--shadow-sm);
  border-radius: var(--radius-lg);
}

/* ============= Brand text ============= */
.nyx-text-gradient {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ============= App canvas ============= */
.nyx-canvas {
  background-color: var(--bg-0);
  background-image: var(--gradient-canvas);
  color: var(--fg-1);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}