/* ================================================
   Ubden® Design Tokens — dual theme (dark default)
   ================================================ */

:root {
  /* Brand */
  --brand-cyan:   #00D4FF;
  --brand-purple: #7C3AED;
  --brand-green:  #10B981;
  --brand-orange: #F59E0B;

  --gradient-brand: linear-gradient(120deg, var(--brand-cyan), var(--brand-purple));
  --gradient-full:  linear-gradient(120deg, #00D4FF 0%, #7C3AED 45%, #10B981 100%);

  /* Type */
  --font-display: 'Sora', 'Space Grotesk', system-ui, sans-serif;
  --font-heading: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  --fs-hero: clamp(2.9rem, 7.2vw, 5.6rem);
  --fs-h2: clamp(2rem, 4.6vw, 3.3rem);
  --fs-h3: clamp(1.2rem, 2.2vw, 1.5rem);
  --fs-lead: clamp(1rem, 1.6vw, 1.2rem);
  --fs-base: 1rem;
  --fs-sm: 0.875rem;

  /* Layout */
  --container: 1200px;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-section: clamp(4rem, 10vw, 7.5rem);

  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;

  --z-nav: 100;
  --z-overlay: 200;
  --z-loader: 300;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --transition: 0.35s var(--ease-out);
}

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

  --bg: #05060f;
  --bg-alt: #0a0c1a;
  --bg-raised: #0e1124;

  --text: #eef1fb;
  --text-muted: #98a0b8;
  --text-faint: #6b7390;

  --surface: rgba(255, 255, 255, 0.045);
  --surface-strong: rgba(255, 255, 255, 0.08);
  --border: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.18);

  --glass-bg: rgba(10, 12, 26, 0.65);
  --glass-blur: 18px;

  --accent: var(--brand-cyan);
  --accent-contrast: #041018;

  --shadow-card: 0 10px 40px rgba(0, 0, 0, 0.45);
  --shadow-glow-cyan: 0 0 40px rgba(0, 212, 255, 0.18);
  --shadow-glow-purple: 0 0 40px rgba(124, 58, 237, 0.2);

  --hero-glow-1: rgba(0, 212, 255, 0.14);
  --hero-glow-2: rgba(124, 58, 237, 0.16);
  --hero-glow-3: rgba(16, 185, 129, 0.1);

  --nav-bg: rgba(5, 6, 15, 0.72);
  --scrollbar-thumb: rgba(255, 255, 255, 0.16);
}

/* ---------- LIGHT ---------- */
[data-theme="light"] {
  color-scheme: light;

  --bg: #f4f6fd;
  --bg-alt: #ffffff;
  --bg-raised: #ffffff;

  --text: #0c1226;
  --text-muted: #4b556e;
  --text-faint: #7d869e;

  --surface: rgba(12, 18, 38, 0.035);
  --surface-strong: rgba(12, 18, 38, 0.07);
  --border: rgba(12, 18, 38, 0.1);
  --border-strong: rgba(12, 18, 38, 0.2);

  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-blur: 18px;

  --accent: #0284c7;
  --accent-contrast: #ffffff;

  --shadow-card: 0 12px 36px rgba(23, 33, 74, 0.1);
  --shadow-glow-cyan: 0 6px 30px rgba(2, 132, 199, 0.16);
  --shadow-glow-purple: 0 6px 30px rgba(124, 58, 237, 0.14);

  --hero-glow-1: rgba(0, 212, 255, 0.2);
  --hero-glow-2: rgba(124, 58, 237, 0.14);
  --hero-glow-3: rgba(16, 185, 129, 0.12);

  --nav-bg: rgba(255, 255, 255, 0.78);
  --scrollbar-thumb: rgba(12, 18, 38, 0.22);
}