/* =========================================================
   FTOTM Design System — Tokens
   colors_and_type.css
   ========================================================= */

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

:root {
  /* =====================================================
     COLOR — Brand
     ===================================================== */
  --navy-900:       #051433;   /* deepest navy — rare */
  --navy-800:       #09214F;   /* PRIMARY NAVY — headlines, footer, dark surfaces */
  --teal-800:       #023A56;   /* pressed teal */
  --teal-700:       #024D70;   /* OCEAN TEAL — primary CTAs, accent */
  --sky-300:        #9FBDE6;   /* SKY BLUE — section tints, illustration accents */
  --sky-100:        #EEF4FB;   /* TINTED CALLOUT */
  --sky-50:         #F4F8FC;   /* very subtle wash */

  /* =====================================================
     COLOR — Ink / neutrals
     ===================================================== */
  --ink-900:        #111827;
  --ink-800:        #1F2937;   /* body + headlines (default) */
  --ink-600:        #6B7280;   /* muted secondary text */
  --ink-400:        #9CA3AF;   /* helper / disabled */
  --ink-200:        #E5E7EB;   /* hairline borders + non-served counties */
  --ink-100:        #F3F4F6;   /* surface alt 2 */
  --ink-50:         #F9FAFB;   /* card background */
  --white:          #FFFFFF;

  /* =====================================================
     COLOR — Semantic
     ===================================================== */
  --color-fg:               var(--ink-800);
  --color-fg-muted:         var(--ink-600);
  --color-fg-soft:          var(--ink-400);
  --color-fg-inverse:       var(--white);
  --color-bg:               var(--white);
  --color-bg-alt:           var(--ink-50);
  --color-bg-callout:       var(--sky-100);          /* #EEF4FB */
  --color-bg-section:       var(--sky-50);
  --color-border:           var(--ink-200);
  --color-headline:         var(--navy-800);         /* H1/H2 for emphasis */
  --color-accent:           var(--teal-700);         /* primary CTA fill */
  --color-accent-hover:     var(--navy-800);
  --color-accent-pressed:   var(--navy-900);
  --color-accent-on:        var(--white);
  --color-surface-dark:     var(--navy-800);         /* footer + closing CTA */

  /* Status (used in form validation, system messages) */
  --color-success:          #15803D;
  --color-warning:          #B45309;
  --color-danger:           #B23A48;

  /* =====================================================
     TYPE
     ===================================================== */
  --font-sans: 'Inter', 'Söhne', 'Public Sans', system-ui, -apple-system,
               'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  --fs-display:     44px;
  --fs-h1:          40px;
  --fs-h2:          28px;
  --fs-h3:          22px;
  --fs-lead:        19px;
  --fs-body:        16px;
  --fs-small:       14px;
  --fs-micro:       12px;

  --lh-tight:       1.1;
  --lh-snug:        1.25;
  --lh-normal:      1.55;
  --lh-relaxed:     1.65;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-body:  -0.005em;
  --tracking-caps:   0.08em;

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

  /* =====================================================
     SPACING
     ===================================================== */
  --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;
  --space-10:       128px;

  --gutter:         24px;
  --container-max:  1200px;
  --section-y:      96px;
  --section-y-md:   64px;

  /* =====================================================
     RADII
     ===================================================== */
  --r-xs:           4px;
  --r-sm:           8px;
  --r-md:           12px;
  --r-lg:           16px;
  --r-pill:         999px;

  /* =====================================================
     ELEVATION
     ===================================================== */
  --shadow-resting: 0 1px 2px rgba(9,33,79,0.04),
                    0 0 0 1px rgba(9,33,79,0.04);
  --shadow-raised:  0 8px 24px rgba(9,33,79,0.10),
                    0 1px 2px rgba(9,33,79,0.04);
  --shadow-modal:   0 24px 48px rgba(9,33,79,0.20),
                    0 2px 8px rgba(9,33,79,0.06);
  --shadow-focus:   0 0 0 3px rgba(2,77,112,0.28);

  /* =====================================================
     MOTION
     ===================================================== */
  --ease-out:       cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:       120ms;
  --dur-base:       180ms;
  --dur-slow:       240ms;
  --lift:           translateY(-4px);
}

@media (min-width: 768px) {
  :root {
    --fs-display:   64px;
    --fs-h1:        56px;
    --fs-h2:        36px;
    --fs-h3:        24px;
    --fs-lead:      21px;
    --fs-body:      17px;
  }
}

/* =====================================================
   SEMANTIC ELEMENT STYLES
   ===================================================== */

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  letter-spacing: var(--tracking-body);
  color: var(--color-fg);
  background: var(--color-bg);
  margin: 0;
}

h1, .h1, .display {
  font-family: var(--font-sans);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--fw-bold);
  color: var(--color-headline);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

h2, .h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  font-weight: var(--fw-semibold);
  color: var(--color-headline);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

h3, .h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  font-weight: var(--fw-semibold);
  color: var(--color-fg);
  margin: 0 0 var(--space-3);
}

p, .body {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--tracking-body);
  color: var(--color-fg);
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-normal);
  color: var(--color-fg);
  font-weight: var(--fw-regular);
}

.muted, small, .small {
  font-size: var(--fs-small);
  color: var(--color-fg-muted);
  line-height: var(--lh-normal);
}

.micro {
  font-size: var(--fs-micro);
  color: var(--color-fg-muted);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
}

.numeral {
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums lining-nums;
}

code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--ink-100);
  padding: 1px 6px;
  border-radius: var(--r-xs);
}

a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--color-accent); }

/* =====================================================
   COMPONENT PRIMITIVES
   ===================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-body);
  padding: 14px 22px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.btn-primary {
  background: var(--color-accent);
  color: var(--color-accent-on);
}
.btn-primary:hover  { background: var(--color-accent-hover); }
.btn-primary:active { background: var(--color-accent-pressed); transform: translateY(1px); }

.btn-secondary {
  background: transparent;
  color: var(--color-fg);
  border-color: var(--color-border);
}
.btn-secondary:hover { border-color: var(--navy-800); color: var(--navy-800); }

.btn-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-fg);
  font-weight: var(--fw-semibold);
  border-bottom: 1px solid currentColor;
  border-radius: 0;
}
.btn-link:hover { color: var(--color-accent); }
.btn-link .arrow { display: inline-block; transition: transform var(--dur-fast) var(--ease-out); }
.btn-link:hover .arrow { transform: translateX(2px); }

.card {
  background: var(--color-bg);
  border-radius: var(--r-md);
  border: 1px solid var(--color-border);
  padding: var(--space-5);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.card-hoverable:hover {
  transform: var(--lift);
  box-shadow: var(--shadow-raised);
  border-color: transparent;
}

.input {
  font-family: inherit;
  font-size: var(--fs-body);
  color: var(--color-fg);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  width: 100%;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--shadow-focus);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--color-fg-muted);
  background: var(--ink-100);
  padding: 4px 10px;
  border-radius: var(--r-xs);
}

.eyebrow {
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: var(--fw-semibold);
}