/**
 * LOADLESS Design System Variables v1.0
 * Category: Cognitive Load Reduction
 * Mobile-First | Performance-Optimized | Conversion-Focused
 */

/* ========================================
   TYPOGRAPHY TOKENS
   ======================================== */

:root {
  /* Font Families */
  --font-primary: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "Courier New", monospace;

  /* Font Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Type Scale - Desktop */
  --text-hero: 72px;
  --text-hero-lh: 80px;
  --text-h2: 48px;
  --text-h2-lh: 56px;
  --text-h3: 28px;
  --text-h3-lh: 36px;
  --text-body-lg: 18px;
  --text-body-lg-lh: 28px;
  --text-body: 16px;
  --text-body-lh: 24px;

  /* Type Scale - Mobile (override via media query) */
  --text-hero-mobile: 40px;
  --text-hero-mobile-lh: 48px;
  --text-h2-mobile: 30px;
  --text-h2-mobile-lh: 38px;

  /* ========================================
     COLOR TOKENS
     ======================================== */

  /* Navy Palette */
  --navy-deep: #0A1628;
  --navy-mid: #122040;
  --black: #0F172A;

  /* Teal Palette (Primary Brand) */
  --teal-primary: #00C2A8;
  --teal-dark: #00A08A;
  --teal-pale: #E0FAF6;

  /* Neutrals */
  --white: #FFFFFF;
  --off-white: #F8FFFE;
  --slate: #475569;
  --light-gray: #F1F5F9;

  /* ========================================
     SPACING SYSTEM (8px base)
     ======================================== */

  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 128px;

  /* ========================================
     BORDER RADIUS
     ======================================== */

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 999px;

  /* ========================================
     SHADOWS
     ======================================== */

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.12);
  --shadow-xl: 0 16px 48px rgba(15, 23, 42, 0.16);

  /* ========================================
     ANIMATION SYSTEM
     ======================================== */

  /* Easing */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  /* Durations */
  --duration-micro: 150ms;
  --duration-standard: 300ms;
  --duration-entrance: 600ms;

  /* Transforms */
  --translate-hover: -3px;
  --translate-reveal: 24px;
  --scale-pulse-min: 1;
  --scale-pulse-max: 1.04;
}

/* ========================================
   MOBILE OVERRIDES
   ======================================== */

@media (max-width: 768px) {
  :root {
    --text-hero: var(--text-hero-mobile);
    --text-hero-lh: var(--text-hero-mobile-lh);
    --text-h2: var(--text-h2-mobile);
    --text-h2-lh: var(--text-h2-mobile-lh);
  }
}

/* ========================================
   GLOBAL RESETS & BASE STYLES
   ======================================== */

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

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--text-body-lh);
  color: var(--black);
  background: var(--off-white);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  font-weight: var(--weight-bold);
  margin: 0;
}

button, input, select, textarea {
  font-family: inherit;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

.font-primary { font-family: var(--font-primary); }
.font-body { font-family: var(--font-body); }
.font-mono { font-family: var(--font-mono); }

.text-hero {
  font-size: var(--text-hero);
  line-height: var(--text-hero-lh);
  font-weight: var(--weight-bold);
}

.text-h2 {
  font-size: var(--text-h2);
  line-height: var(--text-h2-lh);
  font-weight: var(--weight-semibold);
}

.text-h3 {
  font-size: var(--text-h3);
  line-height: var(--text-h3-lh);
  font-weight: var(--weight-semibold);
}

.text-body-lg {
  font-size: var(--text-body-lg);
  line-height: var(--text-body-lg-lh);
}

.text-body {
  font-size: var(--text-body);
  line-height: var(--text-body-lh);
}

/* Color utilities */
.bg-navy-deep { background-color: var(--navy-deep); }
.bg-navy-mid { background-color: var(--navy-mid); }
.bg-teal { background-color: var(--teal-primary); }
.bg-teal-pale { background-color: var(--teal-pale); }
.bg-white { background-color: var(--white); }
.bg-off-white { background-color: var(--off-white); }

.text-navy { color: var(--navy-deep); }
.text-teal { color: var(--teal-primary); }
.text-white { color: var(--white); }
.text-slate { color: var(--slate); }

/* Spacing utilities */
.p-xs { padding: var(--space-xs); }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }

.m-xs { margin: var(--space-xs); }
.m-sm { margin: var(--space-sm); }
.m-md { margin: var(--space-md); }
.m-lg { margin: var(--space-lg); }
.m-xl { margin: var(--space-xl); }