/* ==========================================================================
   tokens.css — design system custom properties (spec §3)
   The single source of truth for colors, type, space, shape. base.css and
   components.css consume these; page-*.css may too. Change a value here and it
   propagates everywhere.
   ========================================================================== */

/* Self-hosted Inter variable font ----------------------------------------- */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colors ---------------------------------------------------------------- */
  --brand:      #007BFF; /* primary accent: buttons, links, active states */
  --brand-2:    #2F80ED; /* gradient / hover partner */
  --ink:        #04132A; /* deep navy — headings on light, dark tiles */
  --footer-bg:  #071A33; /* rich navy footer */
  --text:       #2A3342; /* body text */
  --muted:      #5A6472; /* secondary text, leads */
  --bg:         #FFFFFF; /* page background */
  --bg-alt:     #F4F6F9; /* light-gray alternating sections */
  --line:       #E6E9EF; /* hairline borders */
  --tile-dark:  #101827; /* the one highlighted dark service tile */

  /* Derived surface colors on dark ---------------------------------------- */
  --on-dark:        #FFFFFF;               /* text on navy/dark surfaces */
  --on-dark-muted:  rgba(255,255,255,.72); /* secondary text on dark */
  --on-dark-line:   rgba(255,255,255,.16); /* borders on dark */

  /* Typography ------------------------------------------------------------ */
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --fs-display: clamp(2.4rem, 5.5vw, 3.9rem); /* H1 / hero */
  --fs-h2:      clamp(1.7rem, 3vw, 2.4rem);   /* section title */
  --fs-h3:      1.25rem;
  --fs-eyebrow: 0.8rem;
  --fs-body:    1rem;
  --fs-lead:    1.125rem;
  --fs-small:   0.875rem;

  --lh-tight: 1.12;
  --lh-body:  1.7;

  --ls-display: -0.02em;
  --ls-eyebrow:  0.14em;

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

  /* Spacing scale --------------------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;

  --gutter:    24px;                      /* container side padding */
  --section-y: clamp(64px, 9vw, 120px);   /* section vertical padding */

  /* Shape ----------------------------------------------------------------- */
  --radius:      16px;   /* cards */
  --radius-sm:   10px;   /* inputs, small chips */
  --radius-pill: 999px;  /* buttons */

  /* Shadow ---------------------------------------------------------------- */
  --shadow:    0 12px 34px rgba(4, 19, 42, .10);
  --shadow-sm: 0 4px 14px rgba(4, 19, 42, .08);
  --shadow-lg: 0 22px 60px rgba(4, 19, 42, .16);

  /* Layout ---------------------------------------------------------------- */
  --container: 1200px;
  --header-h:  72px;   /* fixed header height; #main is offset by this on non-hero pages */

  /* Motion ---------------------------------------------------------------- */
  --ease:        cubic-bezier(.16, .84, .44, 1);
  --dur:         .35s;
  --dur-reveal:  .6s;
}