/* ==========================================================
   Asurgo Design Tokens — variables.css
   Single source of truth for all brand colors, typography,
   spacing, and component values across the site.
   ========================================================== */

:root {
  /* ---- Colors: Primary ---- */
  --color-blue: #104975;
  --color-orange: #CD762B;
  --color-tan: #F0EBE1;

  /* ---- Colors: Neutral ---- */
  --color-dark: #53565B;
  --color-light: #EDF4F3;
  --color-white: #FFFFFF;

  /* ---- Colors: Secondary (use sparingly) ---- */
  --color-secondary-tan: #CCC6BB;
  --color-secondary-blue: #9CCFE1;

  /* ---- Colors: Functional ---- */
  --color-error: #C0392B;
  --color-success: #27AE60;
  --color-focus: rgba(16, 73, 117, 0.25);

  /* ---- Colors: Hover / Active States ---- */
  --color-orange-hover: #B5651D;
  --color-blue-hover: #0C3A5E;

  /* ---- Typography ---- */
  --font-heading: 'Azo Sans', 'Inter', sans-serif;
  --font-body: 'Open Sans', sans-serif;
  --font-accent: 'Libre Baskerville', Georgia, serif;

  /* ---- Type Scale (desktop) ---- */
  --text-h1: 48px;
  --text-h2: 36px;
  --text-h3: 24px;
  --text-body: 18px;
  --text-body-sm: 16px;
  --text-caption: 14px;

  /* ---- Line Heights ---- */
  --lh-h1: 56px;
  --lh-h2: 44px;
  --lh-h3: 32px;
  --lh-body: 28px;
  --lh-body-sm: 24px;
  --lh-caption: 20px;

  /* ---- Spacing ---- */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 48px;
  --space-xl: 80px;
  --space-section: 80px;  /* top/bottom padding per section */

  /* ---- Layout ---- */
  --max-width: 1200px;
  --side-padding: 24px;

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

  /* ---- Shadows ---- */
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-button: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-button-orange: 0 4px 12px rgba(205, 118, 43, 0.3);

  /* ---- Transitions ---- */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.4s ease;
}

/* ---- Mobile Overrides (480px and below) ---- */
@media (max-width: 480px) {
  :root {
    --text-h1: 32px;
    --lh-h1: 40px;
    --text-h2: 28px;
    --lh-h2: 36px;
    --text-h3: 22px;
    --lh-h3: 28px;
    --space-section: 48px;
    --side-padding: 20px;
  }
}

/* ---- Tablet Overrides (481–768px) ---- */
@media (min-width: 481px) and (max-width: 768px) {
  :root {
    --text-h1: 40px;
    --lh-h1: 48px;
    --text-h2: 32px;
    --lh-h2: 40px;
    --side-padding: 32px;
    --space-section: 64px;
  }
}