/* =========================================================
   VARIABLES.CSS — Design Tokens
   All colors, type scale, spacing, radii & shadows live here.
   Edit this file to re-theme the entire site.
========================================================= */

:root {
  /* ---- Color: Dark theme (default) ---- */
  --bg-primary: #08090b;
  --bg-secondary: #0f1114;
  --bg-elevated: #16181c;
  --bg-elevated-2: #1c1f24;
  --border-color: rgba(255, 255, 255, 0.08);
  --border-color-strong: rgba(255, 255, 255, 0.14);

  --text-primary: #f5f6f7;
  --text-secondary: #a1a5ab;
  --text-muted: #7d828a; /* brightened from #6b7076 — meets WCAG AA (4.5:1) on --bg-primary */

  --accent-primary: #6366f1;     /* indigo */
  --accent-secondary: #22d3ee;   /* cyan */
  --accent-tertiary: #a855f7;    /* violet */
  --accent-primary-rgb: 99, 102, 241;

  --success: #34d399;
  --error: #f87171;

  --gradient-brand: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #22d3ee 100%);
  --gradient-brand-soft: linear-gradient(135deg, rgba(99,102,241,0.15) 0%, rgba(168,85,247,0.15) 50%, rgba(34,211,238,0.15) 100%);
  --gradient-radial-glow: radial-gradient(circle, rgba(99,102,241,0.35) 0%, rgba(99,102,241,0) 70%);

  --glass-bg: rgba(22, 24, 28, 0.6);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-blur: 16px;

  /* ---- Typography ---- */
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', monospace;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: clamp(1.75rem, 3vw, 2.25rem);
  --fs-3xl: clamp(2rem, 4vw, 3rem);
  --fs-4xl: clamp(2.5rem, 6vw, 5rem);

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

  /* ---- Spacing scale ---- */
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-section: clamp(80px, 10vw, 140px);

  /* ---- Layout ---- */
  --container-width: 1280px;
  --container-padding: clamp(20px, 5vw, 48px);

  /* ---- Radii ---- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 999px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.36);
  --shadow-glow: 0 0 40px rgba(99, 102, 241, 0.25);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 180ms;
  --duration-base: 320ms;
  --duration-slow: 600ms;

  /* ---- Z-index scale ---- */
  --z-navbar: 100;
  --z-floating: 90;
  --z-chatbot: 110;
  --z-modal: 200;
}

/* ---- Color: Light theme override ---- */
[data-theme='light'] {
  --bg-primary: #ffffff;
  --bg-secondary: #f7f8fa;
  --bg-elevated: #ffffff;
  --bg-elevated-2: #f2f3f5;
  --border-color: rgba(15, 17, 20, 0.08);
  --border-color-strong: rgba(15, 17, 20, 0.14);

  --text-primary: #0d0f12;
  --text-secondary: #4b4f56;
  --text-muted: #63676f; /* darkened from #7a7f87 — meets WCAG AA (4.5:1) on white bg */

  --accent-primary: #4f46e5;
  --accent-secondary: #0891b2;
  --accent-tertiary: #9333ea;

  --glass-bg: rgba(255, 255, 255, 0.65);
  --glass-border: rgba(15, 17, 20, 0.08);

  --shadow-sm: 0 2px 8px rgba(15, 17, 20, 0.06);
  --shadow-md: 0 8px 24px rgba(15, 17, 20, 0.08);
  --shadow-lg: 0 16px 48px rgba(15, 17, 20, 0.1);
  --shadow-glow: 0 0 40px rgba(79, 70, 229, 0.15);
}