/* MarginArc — color tokens (LOCKED palette).
   Light is default; [data-theme="dark"] overrides. Never substitute these hex. */
:root {
  /* ---- brand ---- */
  --ink: #0E1F33;          /* dark surfaces, the wordmark */
  --steel: #1B3A5B;        /* deep brand blue, section accents */
  --accent: #1A73E8;       /* THE single accent — buttons, links, arc, key numbers */
  --accent-deep: #1750A8;  /* hover/pressed accent */
  --link: #1750A8;         /* body links */

  /* ---- text ---- */
  --text: #14283F;         /* primary text / headlines */
  --text-mid: #45566E;     /* body */
  --text-mute: #586B83;    /* captions, meta */
  --text-on-accent: #FFFFFF; /* label color on an accent fill */

  /* ---- surfaces ---- */
  --page: #FFFFFF;         /* the ground */
  --surface: #F4F6F9;      /* raised cards / sections */
  --sunken: #E9EDF3;       /* wells, inset fields */
  --border: #E2E7EE;       /* hairlines */
  --border-strong: #CFD8E3;/* emphasized hairline */
  --accent-tint: #E4EEFC;  /* accent wash — badges, highlight rows */

  /* ---- semantic (use sparingly) ---- */
  --success: #1E7A46;
  --success-tint: #E3F1E9;
  --warning: #E0A100;      /* dark text only on this */
  --warning-tint: #FBF1D6;
  --error: #C0392B;
  --error-tint: #F8E5E2;

  /* ---- data-viz (charts only; CVD-safe; always keep labels) ---- */
  --dv-1: #1A73E8;
  --dv-2: #14283F;
  --dv-3: #0B7A7A;
  --dv-4: #A85D00;
  --dv-5: #6FA8DC;
  --dv-6: #64748B;
}

[data-theme="dark"] {
  /* ---- surfaces ---- */
  --page: #0B1320;
  --surface: #131C2B;      /* raised */
  --sunken: #0A111C;
  --border: #243349;
  --border-strong: #314561;
  --accent-tint: rgba(77,159,255,.12);

  /* ---- brand ---- */
  --ink: #0B1320;
  --steel: #6FA8DC;
  --accent: #4D9FFF;       /* buttons on dark use --ink as the label color */
  --accent-deep: #3D86E6;
  --link: #8CC0FF;

  /* ---- text ---- */
  --text: #E8EDF4;
  --text-mid: #AEBBCE;
  --text-mute: #8595AC;
  --text-on-accent: #0B1320; /* ink label on accent fill in dark */

  /* ---- semantic ---- */
  --success: #46C27D;
  --success-tint: rgba(70,194,125,.13);
  --warning: #F2B43A;
  --warning-tint: rgba(242,180,58,.14);
  --error: #F1736A;
  --error-tint: rgba(241,115,106,.14);

  /* ---- data-viz (dark-tuned, still CVD-safe) ---- */
  --dv-1: #4D9FFF;
  --dv-2: #C7D3E3;
  --dv-3: #3FBDBD;
  --dv-4: #E0A65A;
  --dv-5: #8CC0FF;
  --dv-6: #94A3B8;
}
/* MarginArc — typography tokens (LOCKED families).
   Headlines + wordmark: Inter 600–700. Body/UI: Inter 400–600. */
:root {
  /* families */
  --font-display: "Inter", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  /* weights */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700; /* @kind font */

  /* type scale — fluid where it helps, fixed for UI. display=number/statement hero */
  --t-display: clamp(48px, 6.4vw, 84px); /* @kind font */
  --t-hero: clamp(40px, 5.2vw, 68px); /* @kind font */
  --t-h1: clamp(32px, 4vw, 52px); /* @kind font */
  --t-h2: clamp(26px, 3vw, 38px); /* @kind font */
  --t-h3: 22px; /* @kind font */
  --t-h4: 18px; /* @kind font */
  --t-lead: 20px; /* @kind font */
  --t-body: 16px; /* @kind font */
  --t-sm: 14px; /* @kind font */
  --t-cap: 12.5px; /* @kind font */

  /* leading */
  --lh-tight: 1.04; /* @kind font */
  --lh-snug: 1.2; /* @kind font */
  --lh-body: 1.6; /* @kind font */

  /* tracking */
  --ls-display: -0.02em; /* @kind font */
  --ls-tight: -0.01em; /* @kind font */
  --ls-normal: 0; /* @kind font */
  --ls-eyebrow: 0.14em; /* @kind font */
}
/* MarginArc — spacing, radii, elevation, motion.
   Flat and minimal: hairlines + subtle elevation, never glows. */
:root {
  /* spacing scale (4px 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;
  --s-10: 128px;

  /* layout */
  --container: 1240px;     /* max content width */
  --container-narrow: 760px;
  --gutter: 24px;          /* page side padding */
  --section-y: clamp(64px, 9vw, 128px); /* @kind spacing */

  /* radii — modest, flat */
  --r-xs: 4px;
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* borders */
  --bw: 1px;

  /* elevation — subtle, navy-tinted, never glowy */
  --shadow-xs: 0 1px 2px rgba(14,31,51,.06);
  --shadow-sm: 0 2px 8px -3px rgba(14,31,51,.16);
  --shadow: 0 6px 24px -16px rgba(14,31,51,.40);
  --shadow-lg: 0 18px 48px -28px rgba(14,31,51,.45);

  /* motion — quiet, no bounce */
  --ease: cubic-bezier(.2,.6,.2,1); /* @kind other */
  --ease-out: cubic-bezier(.16,1,.3,1); /* @kind other */
  --dur-fast: .12s; /* @kind other */
  --dur: .18s; /* @kind other */
  --dur-slow: .32s; /* @kind other */
}

[data-theme="dark"] {
  --shadow-xs: 0 1px 2px rgba(0,0,0,.40);
  --shadow-sm: 0 2px 10px -4px rgba(0,0,0,.55);
  --shadow: 0 8px 28px -18px rgba(0,0,0,.70);
  --shadow-lg: 0 20px 52px -28px rgba(0,0,0,.75);
}
/* MarginArc — webfonts. Inter (all weights), self-hostable / Google Fonts.
   These are the only two families. The compiler ships this @import to consumers. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
/* MarginArc — base element defaults. Sets the ground, type rhythm, and a11y basics.
   Consumers get this through styles.css. Keep it minimal — components own their own look. */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--text-mid);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: var(--lh-snug); }
h4 { font-size: var(--t-h4); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); }

p { margin: 0; text-wrap: pretty; }

a {
  color: var(--link);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
a:hover { color: var(--accent); }

strong, b { font-weight: var(--fw-semibold); color: var(--text); }

::selection { background: var(--accent-tint); color: var(--text); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

img { max-width: 100%; display: block; }

hr { border: 0; border-top: var(--bw) solid var(--border); margin: 0; }

/* ---- shared brand utilities (optional helpers, not required by components) ---- */
.ma-eyebrow {
  font-family: var(--font-body);
  font-size: var(--t-cap);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent-deep); /* deeper blue for AA contrast on light bg (was --accent #1A73E8 ≈ 3.7:1) */
}
.ma-display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  color: var(--text);
}
.ma-num {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-display);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.ma-container { max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}