/* ========================================================================
   Matthew Van Pelt for Island County Commissioner — Design Tokens
   Colors · Type · Spacing · Radius · Shadow

   Brand: Navy (#002d62) · Gold (#e1ad01) · White
   Typography: Bebas Neue (display) + Inter (body) — "populist" pairing
   ======================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600&display=swap');

:root {
  /* ---------- Brand: Navy (Primary)
     Variable namespace kept as `green-*` for backward compatibility with
     chuck-west-inherited component code. The semantic role is navy. */
  --color-green-100: #E5EAF0;
  --color-green-300: #7D9AC2;
  --color-green-500: #2B5A8C;
  --color-green-base: #002D62;
  --color-green-700: #001E45;
  --color-green-900: #001026;

  /* ---------- Brand: Deep Navy (Secondary backgrounds)
     Used for dark page chrome (footer, hero overlays). */
  --color-blue-100: #D9E0EB;
  --color-blue-300: #6585A8;
  --color-blue-500: #0F3D7D;
  --color-blue-base: #001E45;
  --color-blue-700: #001026;
  --color-blue-900: #000714;

  /* ---------- Brand: Van Pelt Gold (Accent) ---------- */
  --color-gold-100: #FBF3D2;
  --color-gold-300: #F2D779;
  --color-gold-500: #EBC32A;
  --color-gold-base: #E1AD01;
  --color-gold-700: #A88102;
  --color-gold-900: #6B5301;

  /* ---------- Neutrals ---------- */
  --color-white:       #FFFFFF;
  --color-off-white:   #F5F5F7;
  --color-paper:       #F8F8FA;   /* clean paper — for long-form copy */
  --color-border:      #E0E0E0;
  --color-border-soft: #EFEFEF;
  --color-muted:       #6B6B6B;
  --color-ink:         #0F1F38;   /* deep navy-ink, primary text */
  --color-ink-soft:    #1F2F48;

  /* ---------- Semantic roles ---------- */
  --bg-canvas:         var(--color-white);
  --bg-alt:            var(--color-off-white);
  --bg-paper:          var(--color-paper);
  --bg-dark:           var(--color-green-base);
  --bg-hero:           var(--color-green-base);

  --fg-primary:        var(--color-ink);
  --fg-secondary:      var(--color-muted);
  --fg-on-dark:        var(--color-white);
  --fg-on-dark-soft:   rgba(255,255,255,0.78);

  --brand-primary:     var(--color-green-base);
  --brand-primary-ink: var(--color-green-900);
  --brand-secondary:   var(--color-gold-base);
  --brand-accent:      var(--color-gold-base);
  --brand-accent-warm: var(--color-gold-500);

  --link:              var(--color-green-base);
  --link-hover:        var(--color-green-900);
  --link-on-dark:      var(--color-gold-500);

  --divider:           var(--color-border);
  --rule-accent:       var(--color-gold-base);
  --focus-ring:        var(--color-gold-500);

  /* ---------- Type families
     Bebas Neue: display-only (headlines, eyebrows, hero name treatment).
     Inter: body text, UI, forms, labels. Used for --font-serif role too
     since the populist pairing has no serif body font. */
  --font-display: 'Bebas Neue', 'Impact', 'Arial Black', sans-serif;
  --font-serif:   'Inter', 'Georgia', 'Times New Roman', serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- Type scale (desktop)
     Bebas Neue runs visually large at the same point size as a normal
     sans-serif — base sizes scaled down slightly to compensate. */
  --fs-display:  clamp(3rem, 6.2vw, 5.25rem);  /* 48–84px — campaign poster */
  --fs-h1:       clamp(2.25rem, 4vw, 3.5rem);  /* 36–56px */
  --fs-h2:       clamp(1.75rem, 2.6vw, 2.5rem);/* 28–40px */
  --fs-h3:       1.5rem;                       /* 24px */
  --fs-h4:       1.25rem;                      /* 20px */
  --fs-lead:     1.1875rem;                    /* 19px */
  --fs-body:     1.0625rem;                    /* 17px */
  --fs-small:    0.9375rem;                    /* 15px */
  --fs-caption:  0.8125rem;                    /* 13px */
  --fs-eyebrow:  0.75rem;                      /* 12px */

  --lh-tight:    1.05;
  --lh-snug:     1.15;
  --lh-base:     1.5;
  --lh-loose:    1.65;

  --tracking-tight:   -0.015em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-eyebrow: 0.18em;  /* the ALL-CAPS campaign eyebrow */

  /* ---------- Spacing (8px base, tighter stops near 0) ---------- */
  --space-0:   0;
  --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;

  /* ---------- Radius ---------- */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   6px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* ---------- Shadow / Elevation
     Shadow rgba bases use navy (--color-green-900 equivalent) for
     warm-cool consistency with the navy brand. */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(0, 16, 38, 0.06), 0 1px 1px rgba(0, 16, 38, 0.04);
  --shadow-2: 0 4px 14px rgba(0, 16, 38, 0.08), 0 1px 3px rgba(0, 16, 38, 0.04);
  --shadow-3: 0 18px 42px rgba(0, 16, 38, 0.14), 0 4px 10px rgba(0, 16, 38, 0.06);
  --shadow-inset-rule: inset 0 -2px 0 0 var(--color-gold-base);

  /* ---------- Layout ---------- */
  --container-max: 1200px;
  --container-prose: 68ch;
  --container-narrow: 720px;

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0.0, 0.1, 1);
  --ease-emphasize: cubic-bezier(0.2, 0.0, 0, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
}

/* ========================================================================
   Base element styles (semantic)
   ======================================================================== */

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

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--fg-primary);
  background: var(--bg-canvas);
  font-feature-settings: "kern", "liga", "ss01";
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--fg-primary);
  margin: 0;
  font-weight: 400;        /* Bebas Neue ships at 400 only — bold via size */
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  font-weight: 400;
}

h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  font-weight: 400;
}

h3 { font-size: var(--fs-h3); line-height: 1.2; font-weight: 400; }
h4 { font-size: var(--fs-h4); line-height: 1.25; font-weight: 600; font-family: var(--font-sans); letter-spacing: 0; text-transform: none; }

p {
  margin: 0 0 1em 0;
  max-width: var(--container-prose);
}

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--link-hover); }
a:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

small { font-size: var(--fs-caption); color: var(--fg-secondary); }

hr {
  border: 0;
  border-top: 1px solid var(--divider);
  margin: var(--space-6) 0;
}

hr.rule-gold {
  border-top: 2px solid var(--color-gold-base);
  width: 64px;
  margin: var(--space-5) 0;
}

/* ---------- Utility text classes ---------- */

.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 400;
  text-transform: uppercase;
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand-accent);
}

.lead {
  font-family: var(--font-sans);
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  color: var(--color-ink-soft);
  font-weight: 400;
}

.caption { font-size: var(--fs-caption); color: var(--fg-secondary); }

/* ---------- Dark section overrides ---------- */
.on-dark,
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 {
  color: var(--fg-on-dark);
}
.on-dark a { color: var(--link-on-dark); }
.on-dark .eyebrow { color: var(--color-gold-500); }