/* Alaska Growth Initiative — Design tokens
   Source: AGI design system (claude.ai/design project). Values verbatim. */

/* Webfonts are self-hosted — see styles/fonts.css, linked before this
   file on every page. Nothing is fetched from Google, so no visitor IP
   leaves our origin just to render text. */

:root {
  /* ---- Brand palette (base values) ---- */
  --navy: #042F5F;        /* Deep Navy   — primary anchor */
  --ocean: #1162A1;       /* Ocean Blue  — secondary fills, hover */
  --sky: #30A1D5;         /* Sky Blue    — accent, links, outline CTA */
  --green: #75C542;       /* Growth Green— action color, primary CTA only */
  --pine: #17532A;        /* Pine Green  — deep green for dark sections */
  --mist: #BED5DF;        /* Mist        — light neutral tint */

  /* ---- Tints & shades ---- */
  --navy-900: #021C3A;
  --navy-800: #042F5F;
  --navy-700: #0A3E75;
  --ocean-600: #1162A1;
  --ocean-500: #1F79BF;
  --sky-400: #30A1D5;
  --sky-200: #A9DAF0;
  --green-600: #5FA834;
  --green-500: #75C542;
  --green-200: #CDE9B6;
  --mist-300: #BED5DF;
  --mist-200: #D7E6EC;
  --mist-100: #EEF4F7;

  /* ---- Neutrals ---- */
  --white: #FFFFFF;
  --ink: #0B1B2B;
  --ink-muted: #4A5B6B;
  --hairline: #D4E0E7;

  /* ---- Semantic aliases ---- */
  --surface-page: var(--white);
  --surface-muted: var(--mist-100);
  --surface-panel: var(--mist-200);
  --surface-inverse: var(--navy);
  --surface-card: var(--white);

  --text-heading: var(--navy);
  --text-body: var(--ink);
  --text-muted: var(--ink-muted);
  --text-inverse: var(--white);
  --text-link: var(--sky);
  --text-link-hover: var(--ocean);

  --border-hairline: var(--hairline);
  --border-strong: var(--navy);

  /* Action — Growth Green with NAVY text (green + white fails contrast) */
  --action-bg: var(--green);
  --action-bg-hover: var(--green-600);
  --action-text: var(--navy);

  --action-alt-border: var(--sky);
  --action-alt-text: var(--sky);
  --action-alt-text-inverse: var(--sky-200);

  --accent-on-dark: var(--sky);
  --accent-pine: var(--pine);
  --focus-ring: var(--sky);

  /* ---- Typography ---- */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;

  --weight-body: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  --text-display: 3.5rem;
  --text-h1: 2.75rem;
  --text-h2: 2rem;
  --text-h3: 1.5rem;
  --text-h4: 1.25rem;
  --text-lg: 1.125rem;
  --text-base: 1rem;
  --text-sm: 0.875rem;
  --text-xs: 0.75rem;

  --leading-tight: 1.05;
  --leading-snug: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* Shared height for an input and the button beside it. Their paddings
     resolve to 52px and 48px independently, which left every inline email
     capture 4px out of true. */
  --control-h: 52px;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-eyebrow: 0.14em;

  /* ---- Spacing (4px base) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* ---- Radius ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---- Shadows — cool navy-tinted ---- */
  --shadow-sm: 0 1px 2px rgba(4, 47, 95, 0.08);
  --shadow-md: 0 8px 24px rgba(4, 47, 95, 0.10);
  --shadow-lg: 0 20px 48px rgba(4, 47, 95, 0.14);
  --shadow-cta: 0 8px 20px rgba(117, 197, 66, 0.35);

  /* ---- Layout ---- */
  --container-max: 1120px;
  --container-narrow: 680px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
}