/* ============================================================
   Vextra Design System — Shared Light / Dark tokens
   ============================================================ */

:root {
  color-scheme: light;

  /* Light theme (default) */
  --background: #FAFBFC;
  --surface: #FFFFFF;
  --surface-elevated: #F1F5F9;
  --surface-strong: #E2E8F0;

  --text-primary: #0B1120;
  --text-secondary: #475569;
  --text-muted: #94A3B8;

  --border: #E2E8F0;
  --border-subtle: #F1F5F9;
  --border-accent: rgba(0, 225, 255, 0.35);

  --accent-cyan: #00E1FF;
  --accent-violet: #7B61FF;
  --accent-gradient: linear-gradient(135deg, var(--accent-cyan), var(--accent-violet));
  --accent-gradient-horizontal: linear-gradient(90deg, var(--accent-cyan), var(--accent-violet));

  --shadow-sm: 0 1px 2px rgba(11, 17, 32, 0.04);
  --shadow: 0 4px 24px rgba(11, 17, 32, 0.06);
  --shadow-lg: 0 12px 48px rgba(11, 17, 32, 0.08);
  --shadow-glow-cyan: 0 0 20px rgba(0, 225, 255, 0.25);
  --shadow-glow-violet: 0 0 20px rgba(123, 97, 255, 0.25);

  --focus-ring: rgba(0, 225, 255, 0.5);

  --header-bg: rgba(250, 251, 252, 0.88);

  /* Typography */
  --font-sans: 'Outfit', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Radii */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
  --transition-reveal: 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] {
  color-scheme: dark;

  --background: #090D16;
  --surface: #0A0F1A;
  --surface-elevated: #0F1623;
  --surface-strong: #151D2E;

  --text-primary: #F2F5F9;
  --text-secondary: rgba(242, 245, 249, 0.55);
  --text-muted: rgba(242, 245, 249, 0.35);

  --border: rgba(242, 245, 249, 0.08);
  --border-subtle: rgba(242, 245, 249, 0.05);
  --border-accent: rgba(0, 225, 255, 0.2);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.4);

  --header-bg: rgba(10, 15, 26, 0.9);
}