/* ==========================================================================
   variables.css — Design tokens (single source of truth)
   Levii Portal · Design System / Phase 1

   Everything visual references these custom properties. No component may
   hardcode a color, spacing, radius, shadow or duration.
   ========================================================================== */

:root {
  /* ---- Brand core ------------------------------------------------------ */
  --brand-blue-500: #3a86ff; /* Levii primary */
  --brand-blue-400: #5b8cff;
  --brand-blue-600: #2a6fe0;
  --brand-teal-500: #00c2a8; /* secondary */
  --brand-teal-400: #00e0c6;
  --brand-purple-500: #7b61ff; /* accent */
  --brand-purple-400: #9a86ff;
  --brand-pink-500: #ff5d8f; /* dating warmth */

  /* ---- Neutral scale (cool slate) ------------------------------------- */
  --slate-950: #070a12;
  --slate-900: #0a0e18;
  --slate-850: #0f1421;
  --slate-800: #141b2b;
  --slate-700: #1e2536;
  --slate-600: #2c3448;
  --slate-500: #47506a;
  --slate-400: #6b7490;
  --slate-300: #9aa2ba;
  --slate-200: #c7cddc;
  --slate-100: #e6e9f2;
  --slate-50: #f4f6fb;
  --white: #ffffff;

  /* ---- Semantic ------------------------------------------------------- */
  --success: #22c55e;
  --warning: #f59e0b;
  --error: #ef4444;
  --info: var(--brand-blue-500);

  /* ---- Gradients ------------------------------------------------------ */
  --gradient-brand: linear-gradient(135deg, #3a86ff 0%, #7b61ff 55%, #00c2a8 120%);
  --gradient-brand-soft: linear-gradient(135deg, #5b8cff 0%, #9a86ff 100%);
  --gradient-dating: linear-gradient(135deg, #ff5d8f 0%, #7b61ff 100%);
  --gradient-aurora: radial-gradient(
      60% 60% at 20% 10%,
      rgba(58, 134, 255, 0.35) 0%,
      transparent 60%
    ),
    radial-gradient(50% 50% at 85% 20%, rgba(123, 97, 255, 0.3) 0%, transparent 55%),
    radial-gradient(60% 60% at 60% 90%, rgba(0, 194, 168, 0.22) 0%, transparent 60%);
  --gradient-text: linear-gradient(120deg, #5b8cff 0%, #9a86ff 45%, #00e0c6 100%);

  /* ---- Radii ---------------------------------------------------------- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
  --radius-pill: 999px;

  /* ---- Spacing scale (4px base) --------------------------------------- */
  --space-3xs: 0.25rem; /* 4 */
  --space-2xs: 0.5rem; /* 8 */
  --space-xs: 0.75rem; /* 12 */
  --space-sm: 1rem; /* 16 */
  --space-md: 1.5rem; /* 24 */
  --space-lg: 2rem; /* 32 */
  --space-xl: 3rem; /* 48 */
  --space-2xl: 4.5rem; /* 72 */
  --space-3xl: 6.5rem; /* 104 */
  --space-4xl: 9rem; /* 144 */

  /* ---- Fluid type scale (clamp: min, preferred vw, max) --------------- */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial,
    'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;
  --font-display: 'InterDisplay', 'Inter', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Cascadia Code', Menlo, monospace;

  --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-sm: clamp(0.8125rem, 0.78rem + 0.2vw, 0.9375rem);
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
  --text-xl: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);
  --text-2xl: clamp(1.75rem, 1.4rem + 1.8vw, 2.5rem);
  --text-3xl: clamp(2.25rem, 1.7rem + 2.8vw, 3.5rem);
  --text-4xl: clamp(2.75rem, 1.9rem + 4.4vw, 5rem);
  --text-hero: clamp(2.9rem, 1.6rem + 6vw, 6rem);

  --leading-tight: 1.08;
  --leading-snug: 1.25;
  --leading-normal: 1.6;
  --tracking-tight: -0.03em;
  --tracking-snug: -0.015em;
  --tracking-wide: 0.04em;

  /* ---- Shadows (elevation) -------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(9, 14, 24, 0.06);
  --shadow-sm: 0 2px 8px rgba(9, 14, 24, 0.08);
  --shadow-md: 0 8px 24px rgba(9, 14, 24, 0.1);
  --shadow-lg: 0 18px 48px rgba(9, 14, 24, 0.14);
  --shadow-xl: 0 30px 80px rgba(9, 14, 24, 0.18);
  --shadow-glow: 0 0 60px rgba(58, 134, 255, 0.35);

  /* ---- Motion --------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 160ms;
  --dur-base: 260ms;
  --dur-slow: 480ms;
  --dur-slower: 800ms;

  /* ---- Layout --------------------------------------------------------- */
  --container-max: 1200px;
  --container-wide: 1440px;
  --container-prose: 68ch;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --nav-height: 68px;

  /* ---- Z-index ladder ------------------------------------------------- */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 100;
  --z-nav: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;

  /* ---- Focus ---------------------------------------------------------- */
  --focus-ring: var(--brand-blue-500);
}

/* ==========================================================================
   Light theme (default)
   ========================================================================== */
:root,
[data-theme='light'] {
  color-scheme: light;

  --bg: #f7f9fc;
  --bg-elevated: #ffffff;
  --bg-sunken: #eef2f7;
  --surface: #ffffff;
  --surface-2: #f2f5fa;
  --surface-3: #e8edf5;

  --border: rgba(20, 27, 43, 0.1);
  --border-strong: rgba(20, 27, 43, 0.18);

  --text: #0f1421;
  --text-secondary: #3f4761;
  --text-muted: #6b7490;
  --text-on-brand: #ffffff;

  --glass-bg: rgba(255, 255, 255, 0.65);
  --glass-border: rgba(255, 255, 255, 0.6);
  --glass-blur: 18px;

  --nav-bg: rgba(247, 249, 252, 0.72);
  --hero-glow: rgba(58, 134, 255, 0.16);
  --scrim: rgba(9, 14, 24, 0.5);
}

/* ==========================================================================
   Dark theme
   ========================================================================== */
[data-theme='dark'] {
  color-scheme: dark;

  --bg: #070a12;
  --bg-elevated: #0f1421;
  --bg-sunken: #05070d;
  --surface: #0f1421;
  --surface-2: #141b2b;
  --surface-3: #1e2536;

  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);

  --text: #f4f6fb;
  --text-secondary: #c0c7db;
  --text-muted: #8a92ac;
  --text-on-brand: #ffffff;

  --glass-bg: rgba(15, 20, 33, 0.55);
  --glass-border: rgba(255, 255, 255, 0.09);
  --glass-blur: 20px;

  --nav-bg: rgba(7, 10, 18, 0.7);
  --hero-glow: rgba(91, 140, 255, 0.22);
  --scrim: rgba(0, 0, 0, 0.65);

  --brand-blue-500: #5b8cff;
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 30px 80px rgba(0, 0, 0, 0.6);
}

/* Follow the OS when the user has not made an explicit choice. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;

    --bg: #070a12;
    --bg-elevated: #0f1421;
    --bg-sunken: #05070d;
    --surface: #0f1421;
    --surface-2: #141b2b;
    --surface-3: #1e2536;

    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.16);

    --text: #f4f6fb;
    --text-secondary: #c0c7db;
    --text-muted: #8a92ac;

    --glass-bg: rgba(15, 20, 33, 0.55);
    --glass-border: rgba(255, 255, 255, 0.09);

    --nav-bg: rgba(7, 10, 18, 0.7);
    --hero-glow: rgba(91, 140, 255, 0.22);
    --scrim: rgba(0, 0, 0, 0.65);
  }
}