/* ==========================================================================
   variables.css — Design tokens. Single source of truth for theme values.
   Components must consume these variables and never hardcode colors.
   ========================================================================== */

:root {
  /* Typography */
  --font-display: 'Sora', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Spacing scale */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 14px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;
  --space-2xl: 96px;
  --space-3xl: 140px;

  /* Radius / transitions */
  --radius: 3px;
  --radius-pill: 30px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast: 0.2s ease;
  --transition-base: 0.35s var(--ease);

  /* Layout */
  --container-max: 1240px;
  --header-height: 92px; /* generous enough to cover both scrolled and
                             unscrolled header heights — see scroll-margin-top below */

  /* Breakpoints (referenced in comments; media queries hardcode px) */
  --bp-desktop: 1440px;
  --bp-laptop: 1024px;
  --bp-tablet: 768px;
}

/* ============================= DARK THEME =============================
   Primary brand experience. Near-black base, deep navy surfaces,
   controlled indigo/blue accent — "future engineering", not neon.
   ======================================================================== */
[data-theme='dark'] {
  --color-background: #0a0b0f;
  --color-surface: #111319;
  --color-surface-elevated: #171a22;
  --color-surface-hover: #1d212b;

  --color-text-primary: #ecedf3;
  --color-text-secondary: #888ea0;
  --color-text-tertiary: #5d6272;

  --color-border: #21242e;
  --color-border-soft: #1a1d25;

  --color-accent: #7c93ff;
  --color-accent-strong: #93a6ff;
  --color-accent-dim: #3a3f63;
  --color-accent-soft: rgba(124, 147, 255, 0.08);

  --color-status-ok: #7c93ff;
  --shadow-elevated: 0 20px 60px rgba(0, 0, 0, 0.45);

  /* Background technical grid — very low opacity, dark mode */
  --grid-line: rgba(124, 147, 255, 0.05);
  --glow-accent: 0 0 40px rgba(124, 147, 255, 0.12);
}

/* ============================= LIGHT THEME =============================
   Fully designed alternative — not an inverted dark theme.
   Warm-neutral light surfaces, same brand accent, softened for contrast.
   ======================================================================== */
[data-theme='light'] {
  --color-background: #f7f7f5;
  --color-surface: #ffffff;
  --color-surface-elevated: #f1f1ee;
  --color-surface-hover: #ebebe7;

  --color-text-primary: #14151a;
  --color-text-secondary: #5a5d6b;
  --color-text-tertiary: #8b8e99;

  --color-border: #e3e3df;
  --color-border-soft: #ebebe7;

  --color-accent: #4a5fd6;
  --color-accent-strong: #3949c2;
  --color-accent-dim: #c7cdf5;
  --color-accent-soft: rgba(74, 95, 214, 0.07);

  --color-status-ok: #4a5fd6;
  --shadow-elevated: 0 20px 60px rgba(20, 21, 26, 0.08);

  /* Light mode keeps a faint technical grid too — this is what stops it
     from reading as a generic corporate white page. */
  --grid-line: rgba(74, 95, 214, 0.06);
  --glow-accent: 0 0 30px rgba(74, 95, 214, 0.08);
}