/* ==========================================================================
   Nexora Design System — Tokens
   Generated from tokens/tokens.json. Dark is the default theme; light is
   opt-in via [data-theme="light"] on <html>.
   ========================================================================== */

:root {
  /* ---- Primitive: red ---- */
  --nx-red-50: #FFF1F2;
  --nx-red-100: #FFE0E2;
  --nx-red-200: #FFC5C9;
  --nx-red-300: #FF9AA1;
  --nx-red-400: #FF5F6A;
  --nx-red-500: #F5303D;
  --nx-red-600: #E11D2A;
  --nx-red-700: #BC1420;
  --nx-red-800: #9B151F;
  --nx-red-900: #5C0A10;
  --nx-red-950: #2A0407;

  /* ---- Primitive: neutral ---- */
  --nx-neutral-0: #FFFFFF;
  --nx-neutral-50: #F7F7F8;
  --nx-neutral-100: #EDEDEF;
  --nx-neutral-200: #D9D9DE;
  --nx-neutral-300: #B4B4BC;
  --nx-neutral-400: #8E8E98;
  --nx-neutral-500: #6B6B75;
  --nx-neutral-600: #45454D;
  --nx-neutral-700: #2A2A30;
  --nx-neutral-800: #18181C;
  --nx-neutral-900: #0F0F12;
  --nx-neutral-950: #070708;

  /* ---- Status ---- */
  --nx-success: #22C55E;
  --nx-warning: #F59E0B;
  --nx-danger: #F5303D;
  --nx-info: #3B82F6;

  /* ---- Semantic (dark default) ---- */
  --nx-bg: #070708;
  --nx-bg-elevated: #0F0F12;
  --nx-surface: rgba(24, 24, 28, 0.55);
  --nx-surface-strong: rgba(32, 32, 38, 0.75);
  --nx-border: rgba(255, 255, 255, 0.08);
  --nx-border-strong: rgba(255, 255, 255, 0.16);
  --nx-text: #FFFFFF;
  --nx-text-muted: #A6A6B0;
  --nx-text-subtle: #6B6B75;
  --nx-accent: var(--nx-red-600);
  --nx-accent-hover: var(--nx-red-500);
  --nx-accent-text: var(--nx-red-500);
  --nx-accent-soft: rgba(225, 29, 42, 0.14);
  --nx-on-accent: #FFFFFF;
  --nx-focus-ring: 0 0 0 3px rgba(245, 48, 61, 0.45);

  /* Signature gradients */
  --nx-gradient-accent: linear-gradient(180deg, #F5303D 0%, #C8121F 100%);
  --nx-gradient-ambient:
    radial-gradient(60% 50% at 50% 75%, rgba(225, 29, 42, 0.28) 0%, transparent 70%),
    radial-gradient(40% 60% at 0% 50%, rgba(225, 29, 42, 0.18) 0%, transparent 70%);
  --nx-gradient-surface: linear-gradient(160deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.01) 60%);

  /* ---- Typography ---- */
  --nx-font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --nx-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --nx-weight-regular: 400;
  --nx-weight-medium: 500;
  --nx-weight-semibold: 600;
  --nx-weight-bold: 700;

  --nx-text-xs: 0.75rem;
  --nx-text-sm: 0.875rem;
  --nx-text-md: 1rem;
  --nx-text-lg: 1.125rem;
  --nx-text-xl: 1.25rem;
  --nx-text-2xl: 1.75rem;
  --nx-text-3xl: clamp(2rem, 4vw, 2.5rem);
  --nx-text-4xl: clamp(2.25rem, 6vw, 3.5rem);
  --nx-text-5xl: clamp(2.75rem, 8vw, 4.5rem);

  --nx-leading-tight: 1.1;
  --nx-leading-snug: 1.3;
  --nx-leading-normal: 1.55;

  --nx-tracking-tight: -0.03em;
  --nx-tracking-normal: 0;
  --nx-tracking-wide: 0.04em;

  /* ---- Spacing (4px base) ---- */
  --nx-space-0: 0;
  --nx-space-1: 0.25rem;
  --nx-space-2: 0.5rem;
  --nx-space-3: 0.75rem;
  --nx-space-4: 1rem;
  --nx-space-5: 1.25rem;
  --nx-space-6: 1.5rem;
  --nx-space-8: 2rem;
  --nx-space-10: 2.5rem;
  --nx-space-12: 3rem;
  --nx-space-16: 4rem;
  --nx-space-20: 5rem;
  --nx-space-24: 6rem;

  /* ---- Radius ---- */
  --nx-radius-sm: 6px;
  --nx-radius-md: 10px;
  --nx-radius-lg: 16px;
  --nx-radius-xl: 24px;
  --nx-radius-full: 9999px;

  /* ---- Elevation ---- */
  --nx-shadow-card: 0 1px 0 0 rgba(255, 255, 255, 0.04) inset, 0 20px 40px -20px rgba(0, 0, 0, 0.8);
  --nx-shadow-glow-sm: 0 0 0 1px rgba(245, 48, 61, 0.35), 0 6px 20px -4px rgba(225, 29, 42, 0.55);
  --nx-shadow-glow-lg: 0 0 80px 10px rgba(225, 29, 42, 0.35);
  --nx-blur-glass: 16px;

  /* ---- Motion ---- */
  --nx-duration-fast: 120ms;
  --nx-duration-base: 200ms;
  --nx-duration-slow: 400ms;
  --nx-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --nx-ease-emphasized: cubic-bezier(0.3, 0, 0, 1.2);

  /* ---- Layout ---- */
  --nx-container: 1200px;
  --nx-gutter: clamp(1rem, 4vw, 2rem);

  color-scheme: dark;
}

[data-theme="light"] {
  --nx-bg: #FAFAFB;
  --nx-bg-elevated: #FFFFFF;
  --nx-surface: rgba(255, 255, 255, 0.72);
  --nx-surface-strong: rgba(255, 255, 255, 0.92);
  --nx-border: rgba(15, 15, 18, 0.08);
  --nx-border-strong: rgba(15, 15, 18, 0.16);
  --nx-text: #0F0F12;
  --nx-text-muted: #5A5A64;
  --nx-text-subtle: #8E8E98;
  --nx-accent-hover: var(--nx-red-700);
  --nx-accent-text: var(--nx-red-700);
  --nx-accent-soft: rgba(225, 29, 42, 0.08);
  --nx-gradient-ambient:
    radial-gradient(60% 50% at 50% 75%, rgba(225, 29, 42, 0.12) 0%, transparent 70%),
    radial-gradient(40% 60% at 0% 50%, rgba(225, 29, 42, 0.08) 0%, transparent 70%);
  --nx-gradient-surface: linear-gradient(160deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 100%);
  --nx-shadow-card: 0 1px 2px rgba(15, 15, 18, 0.04), 0 16px 32px -16px rgba(15, 15, 18, 0.18);
  --nx-shadow-glow-lg: 0 0 80px 10px rgba(225, 29, 42, 0.15);
  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --nx-duration-fast: 0ms;
    --nx-duration-base: 0ms;
    --nx-duration-slow: 0ms;
  }
}