/* Synced from the vault by sync_brand_tokens.py. Do not edit here. */
/* LGP core tokens, round six (9 Oct 2026). Source of truth: LGP-rebrand/brand-guide-round-six-2026-10.md.
   Every product imports this file first. The LGP site uses all of it; products use the skeleton
   (label font, border, shadow, endorser) and set their own surface, ink and type in their own file. */
@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&family=Geist+Mono:wght@400;500&display=swap");
:root {
  --lgp-blue: #0080FF;      /* the brand: logo, hero box, large marks. Never under small text */
  --lgp-blue-fill: #0066CC; /* fills that carry small text: buttons, credit strips (5.6:1 with white). Option A, 10 Oct 2026 */
  --lgp-blue-ink: #0050A8;  /* links and blue text on white */
  --lgp-wash: #E8F3FF;
  --lgp-band: #EEF4FB;
  --lgp-ink: #0F1720;
  --lgp-ink-2: #4A5563;
  --lgp-paper: #FAFAF8;
  --lgp-footer-text: #9FB3C8;
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-read: "Source Serif 4", Georgia, serif;
  --font-label: "Geist Mono", ui-monospace, monospace; /* shared by every product */
  --border: 2px solid var(--ink, var(--lgp-ink));
  --shadow-click: 5px 5px 0 var(--ink, var(--lgp-ink)); /* hard shadow means clickable, on every site */
  --section-gap: 104px;
}
.lgp-endorser { display:inline-flex; align-items:center; gap:8px; font:500 11px var(--font-label); letter-spacing:.05em; text-transform:uppercase; }
.lgp-endorser img { width:18px; height:auto; } /* die-blue-solid.svg, the folding box */
.label { font-family: var(--font-label); }
.clickable { border: var(--border); box-shadow: var(--shadow-click); }

/* Light and dark (added 9 Oct 2026, data design guide section 9). Pages use these semantic tokens for
   surfaces and text; the brand constants above never change. Heritage blue stays #0080FF in both modes,
   and anything sitting on heritage blue (hero box, blue plates, buttons) looks the same in both.
   Dark mode follows the system unless <html data-theme="light|dark"> is set. */
:root {
  --surface: var(--lgp-paper); --surface-raised: #FFFFFF; --text: var(--lgp-ink); --text-2: var(--lgp-ink-2);
  --rule: var(--lgp-ink); --rule-soft: #D6DCE3; --link: var(--lgp-blue-ink); --wash: var(--lgp-wash);
  --click-line: var(--lgp-ink); --click-shadow: var(--lgp-ink); /* dark: light line, heritage blue shadow, so 'shadow means clickable' still reads */
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #0B1219; --surface-raised: var(--lgp-ink); --text: #E8EDF2; --text-2: var(--lgp-footer-text);
    --rule: #3A4757; --rule-soft: #243040; --link: #5AB0FF; --wash: #10233A; --click-line: #E8EDF2; --click-shadow: var(--lgp-blue); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --surface: #0B1219; --surface-raised: var(--lgp-ink); --text: #E8EDF2; --text-2: var(--lgp-footer-text);
  --rule: #3A4757; --rule-soft: #243040; --link: #5AB0FF; --wash: #10233A; --click-line: #E8EDF2; --click-shadow: var(--lgp-blue); color-scheme: dark;
}