/* ========================================================================
   Chuck West for Pierce County Council — Design Tokens
   Colors · Type · Spacing · Radius · Shadow
   ======================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400&family=Source+Sans+3:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root {
  /* ---------- Brand: Forest Green (Primary) ---------- */
  --color-green-100: #E8F0E3;
  --color-green-300: #B5CCA6;
  --color-green-500: #5C9147;
  --color-green-700: #2A7012;
  --color-green-base: #144E02;
  --color-green-900: #0C3401;

  /* ---------- Brand: Royal Blue (Secondary) ---------- */
  --color-blue-100: #E3EEFB;
  --color-blue-300: #93BEF0;
  --color-blue-500: #3E87D6;
  --color-blue-base: #1A5DAD;
  --color-blue-700: #124080;
  --color-blue-900: #0A2754;

  /* ---------- Brand: Heraldic Gold (Accent) ---------- */
  --color-gold-100: #FDF4DC;
  --color-gold-300: #F5D97A;
  --color-gold-500: #E6B830;
  --color-gold-base: #C99A10;
  --color-gold-700: #9A730A;
  --color-gold-900: #614806;

  /* ---------- Neutrals ---------- */
  --color-white:       #FFFFFF;
  --color-off-white:   #F5F5F5;
  --color-paper:       #FAF8F2;   /* warm paper — for long-form copy */
  --color-border:      #E0E0E0;
  --color-border-soft: #EFEFEF;
  --color-muted:       #6B6B6B;
  --color-ink:         #1A1A1A;   /* near-black, primary text */
  --color-ink-soft:    #2A2A2A;

  /* ---------- Semantic roles ---------- */
  --bg-canvas:         var(--color-white);
  --bg-alt:            var(--color-off-white);
  --bg-paper:          var(--color-paper);
  --bg-dark:           var(--color-blue-900);
  --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-blue-base);
  --brand-accent:      var(--color-gold-base);
  --brand-accent-warm: var(--color-gold-500);

  --link:              var(--color-blue-700);
  --link-hover:        var(--color-blue-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 ---------- */
  --font-display: 'Playfair Display', 'Times New Roman', Georgia, serif;
  --font-serif:   'Source Serif 4', 'Georgia', 'Times New Roman', serif;
  --font-sans:    'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- Type scale (desktop) ---------- */
  --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-0: none;
  --shadow-1: 0 1px 2px rgba(10, 39, 84, 0.06), 0 1px 1px rgba(10, 39, 84, 0.04);
  --shadow-2: 0 4px 14px rgba(10, 39, 84, 0.08), 0 1px 3px rgba(10, 39, 84, 0.04);
  --shadow-3: 0 18px 42px rgba(10, 39, 84, 0.14), 0 4px 10px rgba(10, 39, 84, 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: 700;
  letter-spacing: var(--tracking-tight);
}

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

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

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

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: 800;
}

.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-serif);
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  color: var(--color-ink-soft);
}

.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); }