/* =========================================================================
   lvmpd-info.com — design tokens (v2)
   Colors are lvmpd.com's exact values (see tokens.json for provenance and contrast).
   Type is the Barlow superfamily lvmpd.com already uses, extended with Condensed
   and Semi Condensed cuts. Self-hosted, SIL OFL.
   ========================================================================= */

/* ---------- Fonts ---------- */
@font-face { font-family: "Barlow"; font-weight: 400; font-style: normal; font-display: optional; src: url("../fonts/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 400; font-style: italic; font-display: optional; src: url("../fonts/barlow-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-style: normal; font-display: optional; src: url("../fonts/barlow-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-style: normal; font-display: optional; src: url("../fonts/barlow-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 700; font-style: normal; font-display: optional; src: url("../fonts/barlow-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 500; font-style: normal; font-display: optional; src: url("../fonts/barlow-condensed-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-style: normal; font-display: optional; src: url("../fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-style: normal; font-display: optional; src: url("../fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 400; font-style: normal; font-display: optional; src: url("../fonts/barlow-semi-condensed-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 500; font-style: normal; font-display: optional; src: url("../fonts/barlow-semi-condensed-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 600; font-style: normal; font-display: optional; src: url("../fonts/barlow-semi-condensed-latin-600-normal.woff2") format("woff2"); }
/* Metric-matched fallbacks so a skipped webfont causes no layout shift */
@font-face { font-family: "Barlow Fallback"; src: local("Arial"), local("Liberation Sans"); size-adjust: 96%; ascent-override: 98%; descent-override: 24%; line-gap-override: 0%; }
@font-face { font-family: "Barlow Condensed Fallback"; src: local("Arial Narrow"), local("Liberation Sans Narrow"), local("Arial"); size-adjust: 88%; ascent-override: 100%; descent-override: 24%; line-gap-override: 0%; }

:root {
  --f-display: "Barlow Condensed", "Barlow Condensed Fallback", "Arial Narrow", sans-serif;
  --f-body: "Barlow", "Barlow Fallback", Arial, sans-serif;
  --f-data: "Barlow Semi Condensed", "Barlow", "Barlow Fallback", Arial, sans-serif;
  --f-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Fluid scale, 375 → 1440 */
  --fs--2: clamp(0.75rem, 0.728rem + 0.094vw, 0.8125rem);    /* 12 → 13  labels */
  --fs--1: clamp(0.875rem, 0.831rem + 0.188vw, 1rem);        /* 14 → 16  data, meta */
  --fs-0:  clamp(1.0625rem, 1.018rem + 0.188vw, 1.1875rem);  /* 17 → 19  body */
  --fs-1:  clamp(1.1875rem, 1.099rem + 0.376vw, 1.4375rem);  /* 19 → 23  lede, row titles */
  --fs-2:  clamp(1.5rem, 1.324rem + 0.751vw, 2rem);          /* 24 → 32  h3 */
  --fs-3:  clamp(2rem, 1.647rem + 1.502vw, 3rem);            /* 32 → 48  h2 */
  --fs-4:  clamp(2.75rem, 2.221rem + 2.254vw, 4.25rem);      /* 44 → 68  h1 */
  --fs-5:  clamp(3.5rem, 2.267rem + 5.258vw, 7rem);          /* 56 → 112 display */
  --lh--2: 1.4; --lh--1: 1.45; --lh-0: 1.55; --lh-1: 1.4; --lh-2: 1.15; --lh-3: 1.05; --lh-4: 1; --lh-5: .92;
  --measure: 66ch; --measure-wide: 78ch;
  --track-caps: .08em; --track-display: -.01em;

  --s-0: 0; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 28px; --s-8: 32px;
  --s-10: 40px; --s-12: 48px; --s-14: 56px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px;
  --section: clamp(var(--s-16), 5vw + 24px, var(--s-24));
  --section-lg: clamp(var(--s-20), 7vw + 24px, var(--s-32));

  --gutter: 16px; --margin: 16px; --cols: 4;
  --container: 1240px; --container-wide: 1440px;

  --r-0: 0; --r-xs: 2px; --r-sm: 3px; --r-full: 9999px;   /* lvmpd uses 2px on buttons; circles for icons */

  --e-1: none;
  --e-2: 0 8px 8px rgba(0,0,0,.08);                        /* lvmpd's own card shadow, used only on hover of clickable cards */
  --e-3: 0 16px 40px -8px rgba(13,13,13,.35);              /* drawer / dialog */

  --d-fast: 120ms; --d-base: 200ms; --d-slow: 320ms; --d-reveal: 480ms;
  --ease: cubic-bezier(.2,0,0,1); --ease-emph: cubic-bezier(.3,0,0,1); --ease-exit: cubic-bezier(.4,0,1,1);
  --z-sticky: 10; --z-header: 20; --z-drawer: 30; --z-dialog: 40; --z-toast: 50;

  /* lvmpd.com exact colors */
  --lv-green: #003300; --lv-navy: #0033A0; --lv-link: #002E90; --lv-gold: #C5B358;
  --lv-cream: #F3F0DE; --lv-sage: #E6EBE6; --lv-gray: #F8F9F8; --lv-ink: #0D0D0D; --lv-text: #393939;

  --c-bg: #FFFFFF; --c-surface: #FFFFFF; --c-surface-2: var(--lv-gray); --c-surface-3: var(--lv-cream); --c-sage: var(--lv-sage);
  --c-border: #DCD9CB; --c-border-strong: #767267;
  --c-text: var(--lv-ink); --c-text-2: var(--lv-text); --c-text-3: #5C5C5C;
  --c-brand: var(--lv-green); --c-brand-2: var(--lv-navy); --c-link: var(--lv-link); --c-brand-3: var(--lv-link); --c-brand-tint: var(--lv-sage);
  --c-on-brand: #FFFFFF; --c-on-brand-2: #FFFFFF; --c-on-accent: var(--lv-ink);
  --c-accent: #6B5A0E; --c-accent-fill: var(--lv-gold); --c-accent-tint: var(--lv-cream);
  --c-success: var(--lv-green); --c-success-tint: var(--lv-sage);
  --c-warning: var(--lv-ink); --c-warning-tint: var(--lv-gold);
  --c-danger: #A3241C; --c-danger-tint: #F7E1DE;
  --c-info: var(--lv-navy); --c-info-tint: var(--lv-sage);
  --c-neutral: var(--lv-text); --c-neutral-tint: var(--lv-cream);
  --c-focus: var(--lv-navy); --c-overlay: rgba(13,13,13,.66);
  --c-header: var(--lv-green); --c-header-text: #FFFFFF; --c-header-muted: rgba(255,255,255,.72);
  color-scheme: light;
}
@media (min-width: 768px) { :root { --gutter: 24px; --margin: 24px; --cols: 8; } }
@media (min-width: 1024px) { :root { --cols: 12; --margin: 40px; } }
@media (min-width: 1440px) { :root { --gutter: 32px; --margin: 56px; } }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-bg: #0B0F0B; --c-surface: #121712; --c-surface-2: #181E18; --c-surface-3: #212821; --c-sage: #1A221A;
    --c-border: #2C342C; --c-border-strong: #737B73;
    --c-text: #F3F0DE; --c-text-2: #CFCDC0; --c-text-3: #A6A69C;
    --c-brand: #003300; --c-brand-2: #0033A0; --c-link: #A9BFF5; --c-brand-3: #C4D3F8; --c-brand-tint: #1A2440;
    --c-on-brand: #F3F0DE; --c-on-brand-2: #FFFFFF; --c-on-accent: #0D0D0D;
    --c-accent: #DCC466; --c-accent-fill: #C5B358; --c-accent-tint: #2A2614;
    --c-success: #8FD6A7; --c-success-tint: #14301C; --c-warning: #0D0D0D; --c-warning-tint: #C5B358;
    --c-danger: #F29088; --c-danger-tint: #3D1A18; --c-info: #A9BFF5; --c-info-tint: #1A2440;
    --c-neutral: #CFCDC0; --c-neutral-tint: #212821; --c-focus: #C5B358; --c-overlay: rgba(0,0,0,.72);
    --c-header: #003300; --c-header-text: #F3F0DE; --c-header-muted: rgba(243,240,222,.7);
    --e-2: 0 8px 16px rgba(0,0,0,.4); --e-3: 0 16px 40px -8px rgba(0,0,0,.7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --c-bg: #0B0F0B; --c-surface: #121712; --c-surface-2: #181E18; --c-surface-3: #212821; --c-sage: #1A221A;
  --c-border: #2C342C; --c-border-strong: #737B73;
  --c-text: #F3F0DE; --c-text-2: #CFCDC0; --c-text-3: #A6A69C;
  --c-brand: #003300; --c-brand-2: #0033A0; --c-link: #A9BFF5; --c-brand-3: #C4D3F8; --c-brand-tint: #1A2440;
  --c-on-brand: #F3F0DE; --c-on-brand-2: #FFFFFF; --c-on-accent: #0D0D0D;
  --c-accent: #DCC466; --c-accent-fill: #C5B358; --c-accent-tint: #2A2614;
  --c-success: #8FD6A7; --c-success-tint: #14301C; --c-warning: #0D0D0D; --c-warning-tint: #C5B358;
  --c-danger: #F29088; --c-danger-tint: #3D1A18; --c-info: #A9BFF5; --c-info-tint: #1A2440;
  --c-neutral: #CFCDC0; --c-neutral-tint: #212821; --c-focus: #C5B358; --c-overlay: rgba(0,0,0,.72);
  --c-header: #003300; --c-header-text: #F3F0DE; --c-header-muted: rgba(243,240,222,.7);
  --e-2: 0 8px 16px rgba(0,0,0,.4); --e-3: 0 16px 40px -8px rgba(0,0,0,.7);
  color-scheme: dark;
}
@media (prefers-reduced-motion: reduce) { :root { --d-fast: 1ms; --d-base: 1ms; --d-slow: 1ms; --d-reveal: 1ms; } }