/* AGCV Design System — Colors & Typography Tokens
 * Source: AGCV_Brand_Guide.md v1.0 (2026)
 */

/* ---------- Web Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@400;600;700;900&family=Source+Sans+3:ital,wght@0,400;0,600;0,700;1,400&family=Source+Serif+4:ital,wght@0,400;0,600;0,700;1,400&display=swap');

:root {
  /* ---------- PRIMARY PALETTE ---------- */
  --agcv-guild-navy: #0B2E4C;
  --agcv-red: #CE0D24;
  --agcv-guild-white: #FFFFFF;

  /* ---------- AGCV RED — INTERACTION STATES ---------- */
  --agcv-red-primary: #CE0D24;
  --agcv-red-mid:     #B70920;
  --agcv-red-hover:   #9E081C;
  --agcv-red-active:  #7C0616;

  /* ---------- SUPPORTING & NEUTRAL ---------- */
  --agcv-deep-navy:    #061530; /* footers, duotone shadows */
  --agcv-chambers:     #F5F9FC; /* primary cool background */
  --agcv-panel-gray:   #EDF0F2; /* card / panel backgrounds */
  --agcv-record-gray:  #DCE5EE; /* rule lines, dividers */
  --agcv-transcript:   #1F2430; /* print body + max-contrast digital */

  /* ---------- TEXT GRAYS (WEB) ---------- */
  --agcv-body-gray:    #565867; /* default web body */
  --agcv-docket-gray:  #6C7480; /* captions / footnotes */
  --agcv-muted-gray:   #8599A9; /* metadata / helper */

  /* ---------- SEMANTIC ---------- */
  --color-bg:           var(--agcv-chambers);
  --color-bg-elevated:  var(--agcv-guild-white);
  --color-bg-panel:     var(--agcv-panel-gray);
  --color-bg-dark:      var(--agcv-guild-navy);
  --color-bg-deepest:   var(--agcv-deep-navy);

  --color-fg:           var(--agcv-transcript);      /* primary text */
  --color-fg-secondary: var(--agcv-body-gray);       /* body text */
  --color-fg-tertiary:  var(--agcv-docket-gray);     /* captions */
  --color-fg-muted:     var(--agcv-muted-gray);      /* metadata */
  --color-fg-on-dark:   var(--agcv-guild-white);

  --color-border:       var(--agcv-record-gray);
  --color-divider:      var(--agcv-record-gray);

  --color-action:       var(--agcv-red-primary);
  --color-action-hover: var(--agcv-red-hover);
  --color-action-active:var(--agcv-red-active);
  --color-link:         var(--agcv-guild-navy);

  --color-focus-ring:   var(--agcv-guild-navy);

  /* ---------- TYPOGRAPHY FAMILIES ---------- */
  --font-display: "Libre Franklin", "Public Sans", "Franklin Gothic", Arial, sans-serif;
  --font-body:    "Source Sans 3", "Source Sans Pro", "Segoe UI", "Helvetica Neue", Calibri, Arial, sans-serif;
  --font-serif:   "Source Serif 4", "Source Serif Pro", Georgia, Cambria, "Times New Roman", serif;
  --font-system:  Arial, sans-serif;

  /* ---------- TYPOGRAPHY WEIGHTS ---------- */
  --fw-regular:  400;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;

  /* ---------- TYPE SCALE (WEB px; print scale noted in README) ---------- */
  --fs-display-xl: 56px;  /* hero title */
  --fs-display-l:  44px;  /* slide/section title */
  --fs-h1:         36px;
  --fs-h2:         28px;
  --fs-h3:         18px;  /* ALL CAPS, red accent */
  --fs-lead:       20px;
  --fs-body:       16px;
  --fs-small:      14px;
  --fs-caption:    12px;

  /* ---------- LINE HEIGHTS ---------- */
  --lh-display: 0.95;
  --lh-heading: 1.2;
  --lh-body:    1.6;
  --lh-caption: 1.4;

  /* ---------- TRACKING ---------- */
  --ls-tight:   -0.01em;
  --ls-normal:  0;
  --ls-label:   0.08em;
  --ls-caps:    0.2em;   /* "tracked +200" per brand guide */

  /* ---------- SPACING (8px base) ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;

  /* ---------- RADII ---------- */
  --radius-sm: 2px;
  --radius-md: 4px;   /* default button radius per guide */
  --radius-lg: 8px;
  --radius-xl: 12px;

  /* ---------- SHADOWS ---------- */
  --shadow-sm:    0 1px 2px rgba(11, 46, 76, 0.06);
  --shadow-md:    0 2px 6px rgba(11, 46, 76, 0.08), 0 1px 2px rgba(11, 46, 76, 0.06);
  --shadow-lg:    0 8px 24px rgba(11, 46, 76, 0.10), 0 2px 6px rgba(11, 46, 76, 0.06);
  --shadow-inset: inset 0 0 0 1px var(--agcv-record-gray);
  --shadow-focus: 0 0 0 2px var(--agcv-guild-navy);

  /* ---------- LAYOUT ---------- */
  --container-max: 1200px;
  --grid-cols: 12;
  --grid-gutter: 24px;

  /* ---------- RULES / DIVIDERS ---------- */
  --rule-red-thin:  2px solid var(--agcv-red-primary);
  --rule-red-bold:  3pt solid var(--agcv-red-primary); /* letterhead */
  --rule-navy:      1px solid var(--agcv-guild-navy);
  --rule-divider:   1px solid var(--agcv-record-gray);
}

/* ---------- BASE ---------- */
html { font-family: var(--font-body); color: var(--color-fg); background: var(--color-bg); }
body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-fg-secondary); }

/* ---------- SEMANTIC TYPE ---------- */
h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  color: var(--agcv-guild-navy);
  letter-spacing: var(--ls-tight);
  margin: 0 0 var(--s-4);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  color: var(--agcv-guild-navy);
  margin: 0 0 var(--s-3);
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--agcv-red-primary);
  margin: 0 0 var(--s-2);
}

.display-xl {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-display-xl);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-tight);
  color: var(--agcv-guild-navy);
}

.display-l {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-display-l);
  line-height: var(--lh-heading);
  color: var(--agcv-guild-navy);
}

p, .p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-fg-secondary);
  margin: 0 0 var(--s-4);
  text-wrap: pretty;
}

.lead {
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--color-fg);
}

small, .caption {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--agcv-docket-gray);
}

.meta {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--agcv-muted-gray);
}

.eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--color-fg-on-dark);
}

.pullquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 20px;
  line-height: 1.4;
  color: var(--agcv-guild-navy);
}

a, .link {
  color: var(--agcv-guild-navy);
  text-decoration: none;
}
a:hover, .link:hover {
  text-decoration: underline;
}

code, .mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95em;
  color: var(--agcv-transcript);
}

/* Utility: left-align body always; never justify per brand rule */
p, li { text-align: left; }

/* Brand accent rule */
.accent-rule {
  display: block;
  width: 48px;
  height: 3px;
  background: var(--agcv-red-primary);
  border: 0;
  margin: var(--s-3) 0;
}