/* ============================================================
   RUH PRODUCTIONS — Design Tokens
   ============================================================ */

:root {
  /* ---- Typography ---- */
  --font-primary: 'Inter', 'Helvetica Neue', Arial, sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.25rem;
  --fs-3xl: 1.875rem;
  --fs-4xl: 2.25rem;
  --fs-hero: clamp(2.5rem, 6vw, 4.5rem);

  --leading-tight: 1.15;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  --tracking-tight: -0.02em;
  --tracking-wide: 0.06em;
  --tracking-widest: 0.2em;

  /* ---- Spacing ---- */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-section: clamp(4rem, 10vh, 8rem);

  /* ---- Radius ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* ---- Transitions ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --duration-theme: 600ms;

  /* ---- Z-Index ---- */
  --z-bg: -1;
  --z-nav: 100;
  --z-overlay: 1000;

  /* ---- Layout ---- */
  --max-width: 1200px;
  --max-width-narrow: 800px;
  --nav-height: 72px;
}

/* ============================================================
   DARK THEME (Default)
   ============================================================ */
:root,
[data-theme="dark"] {
  --bg-primary: #06060B;
  --bg-secondary: #0C0C14;
  --bg-tertiary: #12121E;
  --bg-surface: #181828;
  --text-primary: #F1F5F9;
  --text-secondary: #94A3B8;
  --text-tertiary: #7C8CA2;
  --text-muted: #7189A0;

  --accent-blue: #3B82F6;
  --accent-blue-bright: #60A5FA;

  --glow-primary: rgba(59, 130, 246, 0.15);

  --border-primary: rgba(255, 255, 255, 0.08);
  --border-secondary: rgba(255, 255, 255, 0.1);
  --border-accent: rgba(59, 130, 246, 0.3);

  --shadow-glow: 0 0 20px rgba(59, 130, 246, 0.15);

  --gradient-brand: linear-gradient(135deg, #3B82F6, #8B5CF6);
  --gradient-hero: radial-gradient(ellipse at 50% 0%, rgba(59, 130, 246, 0.08) 0%, transparent 60%);

  --nav-bg: rgba(6, 6, 11, 0.8);
}

/* ============================================================
   LIGHT THEME
   ============================================================ */
[data-theme="light"] {
  --bg-primary: #EFECE8;
  --bg-secondary: #E6E3DE;
  --bg-tertiary: #D2CEC9;
  --bg-surface: #F8F6F3;
  --text-primary: #1C1917;
  --text-secondary: #3D3530;
  --text-tertiary: #57534E;
  --text-muted: #6B6560;

  --accent-blue: #1D4ED8;
  --accent-blue-bright: #2563EB;

  --glow-primary: rgba(29, 78, 216, 0.1);

  --border-primary: rgba(0, 0, 0, 0.12);
  --border-secondary: rgba(0, 0, 0, 0.16);
  --border-accent: rgba(29, 78, 216, 0.35);

  --shadow-glow: 0 0 20px rgba(29, 78, 216, 0.14);

  --gradient-brand: linear-gradient(135deg, #1D4ED8, #6D28D9);
  --gradient-hero: radial-gradient(ellipse at 50% 0%, rgba(29, 78, 216, 0.06) 0%, transparent 60%);

  --nav-bg: rgba(239, 236, 232, 0.92);
}