/* PONI — beaponi.com · v2 design system (2026-10-17)
   Self-hosted fonts only (OFL, see static/fonts/OFL-*.txt). No scripts.
   Contrast measured: navy on cream 11.10 · on every surface tint ≥ 9.67 · navy on coral 4.59 · cream on navy 11.10. */

@font-face { font-family: "Outfit"; src: url("/static/fonts/Outfit-Variable.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/static/fonts/Manrope-Variable.ttf") format("truetype"); font-weight: 200 800; font-display: swap; }

:root {
  --poni-navy: #1F3244;
  --poni-navy-logo: #182F46;   /* matches logo image background */
  --poni-cream: #F5EBD6;
  --poni-sage: #91AD98;
  --poni-gold: #D3AC65;
  --poni-coral: #DC8069;
  --poni-white: #FFFFFF;
  /* Lighter surface tints (Style Guide extension approved 2026-10-17): backgrounds only, navy text */
  --surface-sage: #DAE8DC;
  --surface-coral: #F1D8CE;
  --surface-gold: #EFE0BC;
  --surface-lavender: #E5E0F0;
  --surface-blue: #DEE9ED;
  --surface-lime: #E7EACF;
  --radius-card: 20px;
  --radius-panel: 24px;
  --radius-pill: 999px;
  --focus: 3px solid var(--poni-navy);
  --max: 1200px;
  --read: 44rem;
  --font-head: "Outfit", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { font-size: 112.5%; }                 /* 18px base; scales with browser zoom / text size */
body { margin: 0; background: var(--poni-cream); color: var(--poni-navy); font-family: var(--font-body); line-height: 1.65; }
h1, h2, h3, .btn, .site-header nav, .eyebrow { font-family: var(--font-head); }
h1 { font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.1; margin: .25rem 0 1rem; }
h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.2; margin: 2.5rem 0 .75rem; }
h3 { font-size: 1.2rem; margin: 1.5rem 0 .5rem; }
a { color: var(--poni-navy); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:focus-visible, summary:focus-visible { outline: var(--focus); outline-offset: 3px; border-radius: 6px; }
img { max-width: 100%; height: auto; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--poni-cream); padding: .5rem 1rem; z-index: 10; }

/* Header */
.site-header { background: var(--poni-navy-logo); }
.site-header .inner { max-width: var(--max); margin: 0 auto; padding: .9rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.site-header .brand img { width: 170px; display: block; }
.site-header nav { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.site-header nav a { color: var(--poni-cream); text-decoration: none; font-weight: 600; padding: .35rem 0; }
.site-header nav a:hover { text-decoration: underline; }
.site-header nav a:focus-visible { outline-color: var(--poni-cream); }
.site-header nav a.help { background: var(--poni-coral); color: var(--poni-navy); padding: .55rem 1rem; border-radius: var(--radius-pill); }
.site-header nav a.help:focus-visible { outline: 3px solid var(--poni-cream); }

/* Layout */
main { max-width: var(--read); margin: 0 auto; padding: 2rem 1rem 3rem; }
main.wide { max-width: var(--max); }
.section { margin: 3rem 0; }
.eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; font-weight: 700; color: var(--poni-navy); }
.lead { font-size: 1.15rem; max-width: 40rem; }
hr { border: 0; border-top: 1px solid var(--poni-navy); opacity: .2; margin: 2rem 0; }
blockquote { margin: 1.5rem 0; padding: .75rem 1.25rem; border-left: 6px solid var(--poni-navy); background: var(--surface-gold); border-radius: 0 12px 12px 0; }
li { margin: .35rem 0; }

/* Buttons */
.btn { display: inline-block; min-height: 44px; padding: .7rem 1.3rem; border-radius: var(--radius-pill); font-weight: 600; text-decoration: none; border: 2px solid var(--poni-navy); margin: .25rem .5rem .25rem 0; }
.btn-primary { background: var(--poni-navy); color: var(--poni-cream); }
.btn-primary:focus-visible { outline-offset: 4px; }
.btn-secondary { background: transparent; color: var(--poni-navy); }

/* Hero */
.hero { background: var(--poni-white); border-radius: var(--radius-panel); padding: clamp(1.5rem, 4vw, 3rem); }

/* Learner-first choice cards */
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; list-style: none; padding: 0; }
.choices li { margin: 0; }
.card { display: block; height: 100%; padding: 1.25rem 1.25rem 1.1rem; border-radius: var(--radius-card); text-decoration: none; color: var(--poni-navy); border: 2px solid transparent; }
.card:hover { border-color: var(--poni-navy); }
.card strong { display: block; font-family: var(--font-head); font-size: 1.15rem; margin-bottom: .25rem; }
.card span { display: block; font-size: .95rem; }
.card .go { margin-top: .6rem; font-weight: 700; }
.s-coral { background: var(--surface-coral); } .s-sage { background: var(--surface-sage); } .s-gold { background: var(--surface-gold); }
.s-lavender { background: var(--surface-lavender); } .s-blue { background: var(--surface-blue); } .s-lime { background: var(--surface-lime); }

/* Challenge (no JS: details/summary) */
.challenge { background: var(--surface-sage); border-radius: var(--radius-panel); padding: clamp(1.25rem, 3vw, 2.25rem); }
.fictional { display: inline-block; background: var(--poni-navy); color: var(--poni-cream); font-size: .75rem; font-weight: 700; letter-spacing: .06em; padding: .2rem .6rem; border-radius: var(--radius-pill); }
.sms { background: var(--poni-white); border-radius: 18px; padding: 1rem 1.25rem; margin: .75rem 0 1.25rem; max-width: 28rem; border: 1px solid rgba(31,50,68,.2); }
.sms .from { font-size: .8rem; opacity: .85; margin: 0 0 .35rem; }
.sms p { margin: 0; }
details { background: var(--poni-white); border-radius: 14px; margin: .6rem 0; border: 1px solid rgba(31,50,68,.2); }
summary { cursor: pointer; padding: .9rem 1.1rem; font-weight: 600; min-height: 44px; }
details[open] summary { border-bottom: 1px solid rgba(31,50,68,.15); }
details .answer { padding: .75rem 1.1rem 1rem; }
.verdict { font-weight: 700; }

/* Panels */
.panel { border-radius: var(--radius-panel); padding: clamp(1.25rem, 3vw, 2rem); }
.urgent { background: var(--surface-coral); }
.bridge { background: var(--surface-blue); }

/* Draft banner (preview builds only) */
.draft-banner { background: var(--poni-gold); color: var(--poni-navy); text-align: center; font-weight: 700; padding: .6rem 1rem; }

/* Footer */
.site-footer { background: var(--poni-navy); color: var(--poni-cream); padding: 2.5rem 1rem; }
.site-footer .inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; }
.site-footer a { color: var(--poni-cream); }
.site-footer a:focus-visible { outline-color: var(--poni-cream); }
.site-footer h2 { font-size: 1rem; margin: 0 0 .5rem; color: var(--poni-cream); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer .tagline { font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; margin: .5rem 0; }
.site-footer .small { font-size: .85rem; }
.site-footer img { width: 150px; }

/* Checklist: printable */
input[type="checkbox"] { width: 1.1em; height: 1.1em; }

/* Respect user settings (reading preferences without scripts) */
@media (prefers-contrast: more) {
  :root { --surface-sage:#FFFFFF; --surface-coral:#FFFFFF; --surface-gold:#FFFFFF; --surface-lavender:#FFFFFF; --surface-blue:#FFFFFF; --surface-lime:#FFFFFF; }
  body { color: #0B1520; }
  .card, details, .sms, .panel, .hero, .challenge { border: 2px solid var(--poni-navy); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
@media (max-width: 640px) {
  .site-header .inner { justify-content: center; }
  .site-header nav { justify-content: center; gap: .9rem; }
}
@media print {
  .site-header nav, .skip, .site-footer, .draft-banner { display: none; }
  body { background: #fff; }
  .site-header { background: #fff; }
}