/* baremetrics — EDS foundation
   Design system: "The Ledger" (stardust variant B, DESIGN.md)
   Tokens lifted verbatim from the approved prototypes' :root.
   Fonts: Inter 400 + 600-800, the CAPTURED brand woff2 (OFL) extracted from
   the approved prototypes — self-hosted in styles/fonts/. No head.html font lines. */

@font-face {
  font-family: Inter;
  src: url("/styles/fonts/inter-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: Inter;
  src: url("/styles/fonts/inter-600-800.woff2") format("woff2");
  font-weight: 600 800;
  font-display: swap;
}

/* Metric-matched fallback: local Arial adjusted to Inter's line box
   (fonttools-computed from the captured woff2: 107.48 / 90.14 / 22.44). */
@font-face {
  font-family: Arial;
  src: local("Arial");
  size-adjust: 107.48%;
  ascent-override: 90.14%;
  descent-override: 22.44%;
  line-gap-override: 0%;
}

:root {
  --heading-font-family: "Inter", arial, system-ui, sans-serif;
  --body-font-family: "Inter", arial, system-ui, sans-serif;
  --heading-xxl: 54px; /* h1 */
  --heading-xl: 40px; /* h2 */
  --heading-lg: 30px; /* h3 */
  --heading-md: 22px; /* h4 / card h3 */
  --body: 17px;
  --body-sm: 14px;
  --eyebrow: 13px;
  --line-height-heading: 1.15;
  --line-height-body: 1.6;

  /* grounds */
  --color-bg: oklch(100% 0 0); /* #fff */
  --color-mist: oklch(98% 0.001 285); /* #f9f9f9 */
  --color-tint: oklch(97% 0.012 270); /* #f2f5ff */

  /* text */
  --color-fg: oklch(32% 0.04 285); /* ink #33334f */
  --color-slate: oklch(50% 0.06 285); /* #5c6494 */

  /* brand */
  --color-accent: oklch(58% 0.19 272); /* periwinkle #6078ff — non-text only */
  --color-action: oklch(51% 0.21 270); /* action #4055e8 */
  --color-action-hover: oklch(46% 0.21 270);
  --color-signal-orange: oklch(75.5% 0.163 51);
  --color-signal-magenta: oklch(74.1% 0.21 320);
  --color-x: oklch(54.4% 0.188 6.4); /* deepened red-x #c22b5e (3rd Mode A+ recolor) */
  --color-footer-muted: oklch(79.3% 0.046 285); /* on ink only */
  --color-hairline: oklch(92% 0.01 285);

  /* spacing / layout */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 48px;
  --spacing-2xl: 96px;
  --section-padding: 56px; /* balanced-compact 56/44/32 */
  --max-width: 1360px;
  --radius: 8px;
  --radius-card: 16px;
  --radius-chip: 999px;
  --shadow-rest: 0 1px 8px oklch(0% 0 0 / 8%);
  --shadow-card: 0 10px 40px 10px oklch(32% 0.04 285 / 6%);
  --ease-entrance: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-state: cubic-bezier(0.4, 0, 0.2, 1);
  --z-dropdown: 20;
  --z-nav: 30;
  --z-skip: 40;

  /* Ledger system (DESIGN.md § The Ledger System) */
  --color-ruling: oklch(85% 0.02 285 / 60%);
  --hairline-dotted: 1px dotted var(--color-ruling);
  --figure-tracking: -0.02em;

  /* form-field border — the prototypes' .ds-input literal (full-alpha ruling),
     tokenised for the block library (added by Wave A, foundation extension) */
  --color-input-border: oklch(85% 0.02 285);

  /* vendored section-metadata.css (ported AuthorKit boilerplate) references
     these boilerplate token names — alias to the Ledger scale so #91 passes */
  --color-dark: var(--color-fg);
  --color-light: var(--color-mist);
  --spacing-s: var(--spacing-sm);
  --spacing-m: var(--spacing-md);
  --spacing-l: var(--spacing-lg);
  --spacing-xxl: var(--spacing-2xl);
  --grid-column-width: 80px;
}

/* === reset === */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: arial, system-ui, sans-serif;
  font-size: var(--body);
  line-height: var(--line-height-body);
  color: var(--color-fg);
  background: var(--color-bg);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

body.session { font-family: var(--body-font-family); }

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

::selection { background: var(--color-accent); color: oklch(100% 0 0); }

/* headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--heading-font-family);
  line-height: var(--line-height-heading);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 { font-size: clamp(38px, 5vw, var(--heading-xxl)); }
h2 { font-size: clamp(30px, 3.6vw, var(--heading-xl)); }
h3 { font-size: clamp(22px, 2.4vw, var(--heading-lg)); }
h4 { font-size: var(--heading-md); }

p { text-wrap: pretty; }

a { color: var(--color-action); }

a:hover { color: var(--color-action-hover); }

:focus-visible {
  outline: 3px solid var(--color-action);
  outline-offset: 2px;
}

/* === EDS section scaffold === */
main .section { display: block; }

main .section > .default-content,
main .section > .block-content { display: block; }

main > div,
.has-template,
div[data-status] { display: none; }

main .section:empty { display: none; }

/* section grounds (set via section-metadata style or block CSS) */
main .section.mist { background: var(--color-mist); }

main .section.tint { background: var(--color-tint); }

/* default-content prose (section heads, article prose) */
main .section > .default-content {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

/* === long-content guards (prevent mobile horizontal overflow) ===
   Authored prose can contain long unbreakable strings — bare URLs,
   underscore_formula_tokens, em-dash runs, pasted embed/shortcode markup.
   Let text break to the container width and let wide code/tables scroll
   within their own box instead of widening the viewport. */
p,
li,
dt,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
figcaption,
blockquote,
td,
th {
  overflow-wrap: break-word;
}

main .section > .default-content pre,
main .section > .default-content table,
main .section > .default-content code {
  max-width: 100%;
  overflow-x: auto;
}

/* === header reservation (#81) — static fragment injects after first paint === */
header {
  min-height: 73px;
  background: var(--color-bg);
}

footer { background: var(--color-fg); }

/* === buttons (ak.js decorator: strong>a = .btn-primary, em>a = .btn-secondary) === */
a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 26px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  transition: background 0.2s var(--ease-state), color 0.2s var(--ease-state), border-color 0.2s var(--ease-state);
}

a.btn-primary {
  background: var(--color-action);
  color: oklch(100% 0 0);
  border-color: var(--color-action);
}

a.btn-primary:hover {
  background: var(--color-action-hover);
  border-color: var(--color-action-hover);
  color: oklch(100% 0 0);
}

a.btn-secondary {
  background: transparent;
  color: var(--color-action);
  border-color: oklch(51% 0.21 270 / 72%);
}

a.btn-secondary:hover {
  border-color: var(--color-action);
  background: var(--color-tint);
  color: var(--color-action);
}

/* on-dark surfaces (#41): scope to section.dark AND on-ink block classes.
   .band.accent (deepened periwinkle #4055e8 ground) shares the on-dark
   treatment so on-accent button text/border clear AA (white 5.70:1). */
main .section.dark a.btn-primary,
main .band.ink a.btn-primary,
main .band.accent a.btn-primary {
  background: oklch(100% 0 0);
  color: var(--color-fg);
  border-color: oklch(100% 0 0);
}

main .section.dark a.btn-secondary,
main .band.ink a.btn-secondary,
main .band.accent a.btn-secondary {
  color: oklch(100% 0 0);
  border-color: oklch(100% 0 0 / 60%);
}

/* on the accent ground, use a solid white border so the secondary button
   outline itself clears 4.5:1 (5.70:1), not just the 3:1 non-text minimum. */
main .band.accent a.btn-secondary { border-color: oklch(100% 0 0); }

main .section.dark a.btn-secondary:hover,
main .band.ink a.btn-secondary:hover,
main .band.accent a.btn-secondary:hover {
  border-color: oklch(100% 0 0);
  background: oklch(100% 0 0 / 8%);
}

main .section.dark :focus-visible,
main .band.ink :focus-visible,
main .band.accent :focus-visible { outline-color: oklch(100% 0 0); }

.btn-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  align-items: center;
}

/* === shared Ledger primitives (system-wide vocabulary, used by many blocks) === */
.meta-label {
  font-size: var(--eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-slate);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* window chrome — product imagery sits in a window (28px mist bar, 3 dots) */
.win {
  display: block;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-bg);
}

.win-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 12px;
  background: var(--color-mist);
  border-bottom: 1px solid var(--color-hairline);
}

.win-bar span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--color-ruling);
}

/* document sheet — shadow-free, hairline-bordered */
.sheet {
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius);
  background: var(--color-bg);
  padding: var(--spacing-lg);
}

@media (width <= 900px) {
  :root { --section-padding: 44px; }
}

@media (width <= 640px) {
  :root { --section-padding: 32px; }

  header { min-height: 65px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}