/* ============================================
   DESIGN TOKENS
   ============================================ */

:root {
  /* PRIMARY BRAND COLORS */
  --color-navy-900: #021f3f; /* Deep Navy */
  --color-navy-800: #053366;
  --color-navy-700: #0a4799;
  --color-blue-primary: #085cf0; /* Vibrant Blue */
  --color-blue-600: #0651d4;
  --color-blue-500: #1a6fff;
  --color-blue-light: #e8f0ff;

  /* SECONDARY GREEN SCALES */
  --color-green-900: #0d6342; /* Forest Green */
  --color-green-800: #0f7d3e;
  --color-green-700: #1a9b52;
  --color-green-600: #2cb866;
  --color-green-500: #4ec980;
  --color-green-400: #14c566; /* Fresh Green */
  --color-green-light: #e9f9e4;

  /* VIBRANT ACCENT COLORS */
  --color-purple-primary: #8f93ff; /* Soft Lavender */
  --color-purple-light: #eaeaf7;
  --color-yellow-primary: #f9dc3c; /* Yellow */
  --color-yellow-dark: #f0ce22;

  /* FUNCTIONAL & NEUTRALS */
  --color-black: #000000;
  --color-black-90: #1a1a1a;
  --color-white: #ffffff;
  --color-cream: #fffdf1; /* Cream */
  --color-gray-900: #1a1a1a;
  --color-gray-800: #333333;
  --color-gray-700: #4d4d4d;
  --color-gray-600: #666666;
  --color-gray-500: #808080;
  --color-gray-400: #999999;
  --color-gray-300: #cccccc;
  --color-gray-200: #e6e6e6;
  --color-gray-100: #f5f5f5;
  --color-gray-50: #fafafa;

  /* SEMANTIC COLORS */
  --color-success: #4ec980;
  --color-error: #d64545;
  --color-warning: #f9dc3c;
  --color-info: #085cf0;

  /* SPACING */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* Antonio: h1, h2, h3, card titles.
     DM Sans: body text, label text, section text. */
  --font-family-display: "Antonio", "Arial Narrow", "Helvetica Neue Condensed", sans-serif;
  --font-family-base: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* Desktop type scale. Mobile overrides at the bottom of this file. */
  --font-size-h1: 6rem; /* 96px */
  --font-size-h2: 4rem; /* 64px */
  --font-size-h3: 3.5rem; /* 56px */
  --font-size-card-title: 2rem; /* 32px */
  --font-size-description: 1.5rem; /* 24px */
  --font-size-body: 1.125rem; /* 18px */
  --font-size-section: 1rem; /* 16px */
  --font-size-label: 0.875rem; /* 14px */

  /* Outside the type scale. Incidental UI only: fine print, captions. */
  --font-size-small: 0.875rem;
  --font-size-xs: 0.75rem;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Headings are nominally set solid, but Antonio cannot render accented Spanish
     caps at that leading. Measured from the font: É and Ó reach 1.1294em above
     the baseline and Q descends to -0.1426em, so consecutive lines need 1.272em
     between baselines before their ink can clear. 1.3 leaves a small margin. */
  --line-height-h1: 1.1;
  --line-height-heading: 1.3;
  --line-height-flat: 1;
  --line-height-tight: 1.2;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.8;

  --button-font-size: 0.875rem;
  --button-font-weight: 600;
  --button-min-height: 3rem;
  --button-radius: 2rem;
  --button-padding-y: 0.875rem;
  --button-padding-x: 1.75rem;
  --button-gap: 0.5rem;

  /* BORDER RADIUS */
  --radius-none: 0;
  --radius-sm: 0.25rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-pill: 999px;

  /* SHADOWS */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.08);
  --shadow-hover: 0 6px 16px rgba(0, 0, 0, 0.15);

  /* TRANSITIONS */
  --transition-fast: 150ms ease-in-out;
  --transition-normal: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;

  /* Z-INDEX */
  --z-dropdown: 1000;
  --z-sticky: 100;
  --z-fixed: 1000;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

body {
  font-family: var(--font-family-base);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  letter-spacing: 0;
  color: var(--color-navy-900);
}

/* One class per step in the type scale. */
.text-h1 {
  font-family: var(--font-family-display);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-h1);
}

.text-h2 {
  font-family: var(--font-family-display);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
}

.text-h3 {
  font-family: var(--font-family-display);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
}

.text-card-title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-card-title);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  text-transform: uppercase;
}

/* Body copy is set at 1.6 rather than solid like the other styles: these
   paragraphs wrap over several lines, where a 1.0 line-height collides and
   fails WCAG 1.4.12. */
.text-body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
}

.text-label {
  font-family: var(--font-family-base);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-flat);
}

.text-section {
  font-family: var(--font-family-base);
  font-size: var(--font-size-section);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-flat);
}

.text-small {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
}

.text-xs {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
}

.font-bold {
  font-weight: var(--font-weight-bold);
}

.font-semibold {
  font-weight: var(--font-weight-semibold);
}

.font-medium {
  font-weight: var(--font-weight-medium);
}

/* COLOR UTILITIES */
.text-navy {
  color: var(--color-navy-900);
}

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

.text-green {
  color: var(--color-green-900);
}

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

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

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

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

.bg-green-light {
  background-color: var(--color-green-400);
}

/* ============================================
   MOBILE TYPE SCALE
   A discrete set rather than a fluid scale, so sizes swap at the breakpoint
   instead of interpolating. Families and weights match desktop.

   Applied from 1024px, not 768px: that is where the nav collapses and the
   columns get narrow enough that the desktop sizes start to crowd.
   ============================================ */
@media (max-width: 1024px) {
  :root {
    --font-size-h1: 3.5rem; /* 56px */
    --font-size-h2: 3rem; /* 48px */
    --font-size-h3: 2.5rem; /* 40px */
    --font-size-description: 1rem; /* 16px */
    --font-size-body: 1rem; /* 16px */
    --font-size-label: 1rem; /* 16px */
    --font-size-section: 0.875rem; /* 14px */

    /* Set solid on mobile, unlike desktop. */
    --line-height-h1: 1;
  }
}