/* ============================================
   GLOBAL DESIGN SYSTEM
   ============================================ */

:root {
  /* Typography */
  --font-display-xl: "Hanken Grotesk", sans-serif;
  --font-headline-lg: "Hanken Grotesk", sans-serif;
  --font-body-md: "Inter", sans-serif;
  --font-label-tactical: "JetBrains Mono", monospace;

  /* Font Sizes */
  --text-display-xl: 64px;
  --text-headline-lg: 32px;
  --text-body-md: 16px;
  --text-label-tactical: 12px;

  /* Spacing */
  --space-unit: 8px;
  --space-base: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 64px;

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

  /* Transitions */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 300ms ease-in-out;
  --transition-slow: 500ms ease-in-out;

  /* Z-index Scale */
  --z-nav: 50;
  --z-modal: 100;
  --z-tooltip: 200;

  /* Theme-aware glow/shadow tokens */
  --brand-glow-soft: 0 0 10px color-mix(in srgb, var(--color-primary) 20%, transparent);
  --brand-glow-strong: 0 0 20px color-mix(in srgb, var(--color-primary) 40%, transparent);
  --cta-shadow: var(--shadow-xl);
}

/* ============================================
   SCALEWIDTH THEME (Light Mode)
   ============================================ */

html:not(.dark) {
  --bg-surface: #fdf7ff;
  --bg-container: #f2ecf4;
  --bg-container-low: #f8f2fa;
  --bg-container-high: #ece6ee;
  --bg-container-highest: #e6e0e9;
  --bg-container-lowest: #ffffff;

  --text-on-surface: #1d1b20;
  --text-on-surface-variant: #494551;
  --text-on-background: #1d1b20;

  --color-primary: #4f378a;
  --color-primary-container: #6750a4;
  --color-primary-fixed: #e9ddff;
  --color-primary-fixed-dim: #cfbcff;

  --color-secondary: #63597c;
  --color-secondary-container: #e1d4fd;
  --color-secondary-fixed: #e9ddff;
  --color-secondary-fixed-dim: #cdc0e9;

  --color-tertiary: #765b00;
  --color-tertiary-container: #c9a74d;
  --color-tertiary-fixed: #ffdf93;
  --color-tertiary-fixed-dim: #e7c365;

  --color-error: #ba1a1a;
  --color-error-container: #ffdad6;

  --border-color: rgba(255, 255, 255, 0.2);
  --border-color-variant: #cbc4d2;

  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 40px rgba(0, 102, 255, 0.05);
}

/* ============================================
   VIGILANTE THEME (Dark Mode)
   ============================================ */

html.dark {
  --bg-surface: #121318;
  --bg-container: #1e1f25;
  --bg-container-low: #1a1b21;
  --bg-container-high: #292a2f;
  --bg-container-highest: #34343a;
  --bg-container-lowest: #0d0e13;

  --text-on-surface: #e3e1e9;
  --text-on-surface-variant: #c2c6d8;
  --text-on-background: #e3e1e9;

  --color-primary: #b3c5ff;
  --color-primary-container: #0066ff;
  --color-primary-fixed: #e9ddff;
  --color-primary-fixed-dim: #cfbcff;

  --color-secondary: #cfbcff;
  --color-secondary-container: #4f378a;
  --color-secondary-fixed: #e9ddff;
  --color-secondary-fixed-dim: #cfbcff;

  --color-tertiary: #ffb4aa;
  --color-tertiary-container: #de211c;
  --color-tertiary-fixed: #ffdad5;
  --color-tertiary-fixed-dim: #ffb4aa;

  --color-error: #ffb4ab;
  --color-error-container: #93000a;

  --border-color: rgba(255, 255, 255, 0.1);
  --border-color-variant: #424656;

  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.6);
}

/* ============================================
   RESET & BASE STYLES
   ============================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body-md);
  font-size: var(--text-body-md);
  line-height: 1.5;
  color: var(--text-on-surface);
  background-color: var(--bg-surface);
  transition: background-color var(--transition-base), color var(--transition-base);
  overflow-x: hidden;
}

body.has-fixed-navbar {
  padding-top: 6rem;
}

@media (max-width: 768px) {
  body.has-fixed-navbar {
    padding-top: 5.25rem;
  }
}

img,
video,
canvas,
svg {
  max-width: 100%;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

/* Remove default link styles */
a {
  color: inherit;
  text-decoration: none;
}

/* Remove default button styles */
button {
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
}

/* ============================================
   UTILITY CLASSES - COLOR
   ============================================ */

.text-primary {
  color: var(--color-primary);
}

.text-secondary {
  color: var(--color-secondary);
}

.text-tertiary {
  color: var(--color-tertiary);
}

.text-muted {
  color: var(--text-on-surface-variant);
}

.bg-primary {
  background-color: var(--color-primary);
}

.bg-container {
  background-color: var(--bg-container);
}

/* ============================================
   UTILITY CLASSES - BORDER RADIUS
   ============================================ */

.rounded {
  border-radius: var(--radius-md);
}

.rounded-lg {
  border-radius: var(--radius-lg);
}

.rounded-xl {
  border-radius: var(--radius-xl);
}

.rounded-full {
  border-radius: var(--radius-full);
}

/* ============================================
   UTILITY CLASSES - SHADOWS
   ============================================ */

.shadow-sm {
  box-shadow: var(--shadow-sm);
}

.shadow-md {
  box-shadow: var(--shadow-md);
}

.shadow-lg {
  box-shadow: var(--shadow-lg);
}

.shadow-xl {
  box-shadow: var(--shadow-xl);
}

/* ============================================
   UTILITY CLASSES - TRANSITIONS
   ============================================ */

.transition-all {
  transition: all var(--transition-base);
}

.transition-colors {
  transition: background-color var(--transition-base), color var(--transition-base);
}

.transition-fast {
  transition: all var(--transition-fast);
}

.transition-slow {
  transition: all var(--transition-slow);
}