/* ============================================================
   ADG Vantage — Design Tokens
   Single source of truth for color, spacing, typography, motion.
   Reference these in CSS — never hardcode.

   Light-mode only (deliberate brand decision).
   For dark composition sections (hero, footer, CTA bands), use
   the parallel --*-on-dark tokens via a .section-dark wrapper.

   Breakpoints (CSS limitation: not custom-property-substitutable):
     sm: 480px    md: 768px    lg: 1024px    xl: 1280px
   Author CSS mobile-first; layer with @media (min-width: ...).
   ============================================================ */

:root {
  /* ─── Brand ──────────────────────────────────────────────── */
  --color-brand:           #3972a5;  /* Primary Vantage blue (marketing spec) */
  --color-brand-hover:     #305f8a;  /* Pressed / hover (darker) */
  --color-brand-strong:    #1f4f74;  /* Headings, dark accents on light */
  --color-brand-soft:      #d2effa;  /* Tinted backgrounds, subtle highlights (marketing spec) */
  --color-brand-bright:    #5b9ed0;  /* Brighter accent for emphasis */

  /* ─── Surfaces ───────────────────────────────────────────── */
  --color-bg:              #FFFFFF;  /* Page background */
  --color-surface:         #f5f7fa;  /* Subtle surface (sections, alternating bands) */
  --color-surface-raised:  #FFFFFF;  /* Cards on top of bg */
  --color-overlay:         rgba(31, 79, 116, 0.55);

  /* ─── Text ───────────────────────────────────────────────── */
  --color-text:            #484a49;  /* Default body text (marketing spec) */
  --color-text-strong:     #1f2937;  /* Headings */
  --color-text-muted:      #6b6d6c;  /* Secondary text */
  --color-text-subtle:     #8b8d8c;  /* Tertiary, captions */
  --color-text-inverse:    #FFFFFF;  /* On brand-color buttons */

  /* ─── Borders & dividers ─────────────────────────────────── */
  --color-border:          #e1e8ee;  /* Marketing spec */
  --color-border-strong:   #c8d2db;
  --color-border-subtle:   #eef2f5;

  /* ─── State ──────────────────────────────────────────────── */
  --color-success:         #16A34A;
  --color-success-soft:    #DCFCE7;
  --color-warning:         #D97706;
  --color-warning-soft:    #FEF3C7;
  --color-danger:          #DC2626;
  --color-danger-soft:     #FEE2E2;
  --color-info:            var(--color-brand);
  --color-info-soft:       var(--color-brand-soft);

  /* ─── Accent (used sparingly, for warmth/contrast) ──────── */
  --color-accent:          #F59E0B;  /* Amber — for occasional emphasis */
  --color-accent-soft:     #FEF3C7;

  /* ─── Spacing (4px base, geometric) ──────────────────────── */
  --space-0:    0;
  --space-1:    0.25rem;   /*  4px */
  --space-2:    0.5rem;    /*  8px */
  --space-3:    0.75rem;   /* 12px */
  --space-4:    1rem;      /* 16px */
  --space-5:    1.25rem;   /* 20px */
  --space-6:    1.5rem;    /* 24px */
  --space-8:    2rem;      /* 32px */
  --space-10:   2.5rem;    /* 40px */
  --space-12:   3rem;      /* 48px */
  --space-16:   4rem;      /* 64px */
  --space-20:   5rem;      /* 80px */
  --space-24:   6rem;      /* 96px */
  --space-32:   8rem;      /* 128px */

  /* ─── Layout ─────────────────────────────────────────────── */
  --container-max:         1200px;
  --container-narrow:      880px;
  --container-pad:         var(--space-6);

  /* ─── Typography ─────────────────────────────────────────── */
  --font-sans:             'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display:          'Outfit', 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:             ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --text-xs:               0.75rem;    /* 12 */
  --text-sm:               0.875rem;   /* 14 */
  --text-base:             1rem;       /* 16 */
  --text-lg:               1.125rem;   /* 18 */
  --text-xl:               1.25rem;    /* 20 */
  --text-2xl:              1.5rem;     /* 24 */
  --text-3xl:              1.875rem;   /* 30 */
  --text-4xl:              2.25rem;    /* 36 */
  --text-5xl:              3rem;       /* 48 */
  --text-6xl:              3.75rem;    /* 60 */

  --leading-tight:         1.15;
  --leading-snug:          1.3;
  --leading-normal:        1.55;
  --leading-loose:         1.75;

  --tracking-tight:        -0.02em;
  --tracking-normal:       0;
  --tracking-wide:         0.04em;
  --tracking-wider:        0.08em;

  /* ─── Radii ──────────────────────────────────────────────── */
  --radius-sm:             6px;
  --radius-md:             10px;
  --radius-lg:             16px;
  --radius-xl:             24px;
  --radius-pill:           9999px;

  /* ─── Shadows ────────────────────────────────────────────── */
  --shadow-sm:             0 1px 2px rgba(31, 41, 55, 0.05);
  --shadow-md:             0 4px 12px rgba(31, 41, 55, 0.08);
  --shadow-lg:             0 12px 32px rgba(31, 41, 55, 0.12);
  --shadow-brand:          0 8px 24px rgba(57, 114, 165, 0.28);
  --shadow-focus:          0 0 0 3px rgba(57, 114, 165, 0.35);

  /* ─── Motion ─────────────────────────────────────────────── */
  --ease-out:              cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:           cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:         120ms;
  --duration-base:         220ms;
  --duration-slow:         400ms;

  /* ─── Z-index scale ──────────────────────────────────────── */
  --z-base:                1;
  --z-dropdown:            100;
  --z-sticky:              200;
  --z-modal:               1000;
  --z-toast:               1100;

  /* ─── Dark composition sections (hero, footer, CTA bands) ─ */
  --color-bg-on-dark:           #1f4f74;  /* Brand-strong base — keeps prominent bands on-palette */
  --color-surface-on-dark:      #265c84;
  --color-text-on-dark:         #F8FAFC;
  --color-text-muted-on-dark:   #c8d8e6;
  --color-text-subtle-on-dark:  #95aec2;
  --color-border-on-dark:       rgba(255, 255, 255, 0.14);
  --color-border-strong-on-dark:rgba(255, 255, 255, 0.28);
  --color-brand-on-dark:        #9ec6e3;  /* Lighter brand tint for contrast on dark */
}

/* Reduced motion: snap durations to ~0 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}