/* ============================================================================
   ProcureFL design tokens
   Calibrated from rrflows.com design system, adapted for government context
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* ── COLOR - ProcureFL brand: navy + green (per Jim's 2026-08-07 direction) ── */

  --color-bg:              #FFFFFF;
  --color-surface:         #F4F6FB;
  --color-surface-strong:  #E5EAF4;

  --color-ink:             #16233D;
  --color-ink-72:          rgba(22, 35, 61, 0.80);
  --color-ink-56:          rgba(22, 35, 61, 0.66);
  --color-ink-40:          rgba(22, 35, 61, 0.50);

  --color-accent:          #1E3A66;
  --color-accent-hover:    #16294C;
  --color-accent-soft:     rgba(30, 58, 102, 0.08);
  --color-accent-text:     #FFFFFF;

  --color-green:           #2E9E5B;
  --color-green-hover:     #23814A;
  --color-green-soft:      rgba(46, 158, 91, 0.10);
  --color-green-border:    rgba(46, 158, 91, 0.35);

  --color-secondary:       #3D5A85;
  --color-secondary-soft:  rgba(61, 90, 133, 0.08);
  --color-secondary-border: rgba(61, 90, 133, 0.28);

  --color-border:          rgba(22, 35, 61, 0.12);
  --color-border-strong:   rgba(22, 35, 61, 0.24);

  --color-navy:            #16233D;
  --color-navy-deep:       #0D1830;
  --color-on-navy:         #FFFFFF;
  --color-on-navy-muted:   rgba(255, 255, 255, 0.75);
  --color-on-navy-faint:   rgba(255, 255, 255, 0.12);

  --color-success:         #16A34A;
  --color-warning:         #D97706;
  --color-error:           #DC2626;

  /* Card tokens */
  --card-bg:               #FFFFFF;
  --card-border:           rgba(22, 35, 61, 0.12);

  /* Footer */
  --footer-bg:             #0D1830;
  --footer-text:           rgba(255, 255, 255, 0.6);
  --footer-heading:        #F4F6FB;
  --footer-border:         rgba(255, 255, 255, 0.08);

  /* ── TYPOGRAPHY ────────────────────────────────────────────────────────── */

  --font-display:          'Inter', system-ui, -apple-system, sans-serif;
  --font-body:             'Inter', system-ui, -apple-system, sans-serif;

  --fs-display:            clamp(2rem, 3vw + 0.5rem, 2.75rem);
  --fs-h1:                 clamp(1.75rem, 2.5vw + 0.5rem, 2.25rem);
  --fs-h2:                 clamp(1.375rem, 2vw + 0.25rem, 1.75rem);
  --fs-h3:                 1.25rem;
  --fs-h4:                 1.0625rem;
  --fs-body-lead:          1.0625rem;
  --fs-body:               0.9375rem;
  --fs-sm:                 0.8125rem;
  --fs-xs:                 0.6875rem;

  --lh-display:            1.1;
  --lh-tight:              1.2;
  --lh-body:               1.55;

  --ls-display:            -0.02em;
  --ls-heading:            -0.015em;
  --ls-caps:               0.08em;

  --fw-regular:            400;
  --fw-medium:             500;
  --fw-semibold:           600;
  --fw-bold:               700;
  --fw-display:            800;

  /* ── SPACING ───────────────────────────────────────────────────────────── */

  --space-1:               4px;
  --space-2:               8px;
  --space-3:               12px;
  --space-4:               16px;
  --space-5:               20px;
  --space-6:               24px;
  --space-8:               32px;
  --space-10:              40px;
  --space-12:              48px;
  --space-16:              64px;
  --space-20:              80px;
  --space-24:              96px;
  --space-28:              112px;

  /* ── LAYOUT ────────────────────────────────────────────────────────────── */

  --max-w-content:         1400px;
  --max-w-hero:            1240px;
  --max-w-prose:           60ch;

  --container-pad:         var(--space-6);
  --nav-h:                 72px;
  --utility-h:             34px;
  --header-h:              calc(var(--nav-h) + var(--utility-h));

  /* ── RADIUS ────────────────────────────────────────────────────────────── */

  --radius-sm:             4px;
  --radius-md:             8px;
  --radius-lg:             12px;
  --radius-xl:             16px;
  --radius-pill:           9999px;

  --card-radius:           var(--radius-lg);

  /* ── SHADOW ────────────────────────────────────────────────────────────── */

  --shadow-sm:             0 1px 2px rgba(30, 41, 59, 0.04);
  --shadow-md:             0 2px 8px rgba(30, 41, 59, 0.06), 0 1px 2px rgba(30, 41, 59, 0.04);
  --shadow-lg:             0 8px 24px rgba(30, 41, 59, 0.08), 0 2px 4px rgba(30, 41, 59, 0.04);
  --shadow-cta:            0 4px 12px rgba(74, 98, 116, 0.16);

  /* ── MOTION ────────────────────────────────────────────────────────────── */

  --duration-fast:         0.15s;
  --duration-base:         0.30s;
  --duration-slow:         0.60s;

  --ease-standard:         cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:              cubic-bezier(0.0, 0, 0.2, 1);
  --ease-in:               cubic-bezier(0.4, 0, 1, 1);

  --transition-base:       all var(--duration-base) var(--ease-standard);
  --transition-color:      color var(--duration-base) var(--ease-standard),
                           background-color var(--duration-base) var(--ease-standard),
                           border-color var(--duration-base) var(--ease-standard);
}

@media (min-width: 768px) {
  :root { --container-pad: var(--space-12); }
}

@media (min-width: 1280px) {
  :root { --container-pad: var(--space-16); }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0.01ms;
    --duration-base: 0.01ms;
    --duration-slow: 0.01ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Base resets ─────────────────────────────────────────────────────────── */

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

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-ink);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }
a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-hover); }
ul, ol { list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading);
  color: var(--color-ink);
}