/* Summerfunfitness design tokens: Golden hour.
   Deep pine green, like the Okanagan hillsides in Summer's photographs, with the sun yellow of her wordmark as the light.
   Coral is the action colour in the app; periwinkle marks information. Contrast figures are WCAG ratios against --ink. */
@font-face { font-family: "Anton"; src: url("../fonts/Anton.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-800i.woff2") format("woff2"); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-500.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --ink: #0f1f18;            /* pine night */
  --ink-2: #15291f;
  --ink-3: #1d3529;
  --line: rgba(255, 246, 224, .12);
  --line-2: rgba(255, 246, 224, .22);
  --chalk: #fff6e0;          /* warm paper text on ink: 16.4:1 */
  --chalk-2: #d6ccb4;        /* secondary text: 11.2:1 */
  --chalk-3: #a9a08a;        /* tertiary text: 6.9:1 */
  --signal: #c2412d;         /* coral action: white text on it 5.1:1 */
  --signal-deep: #962f20;    /* pressed and hover: white text 7.6:1 */
  --signal-hi: #f5c95e;      /* sun yellow as text or marks on ink: 11.6:1 */
  --signal-wash: rgba(245, 201, 94, .16);
  --clay: #ef7a5a;           /* heat: live, injury, overdue */
  --clay-wash: rgba(239, 122, 90, .14);
  --go: #6fd3a0;
  --go-wash: rgba(111, 211, 160, .13);
  --steady: #9bb5ec;         /* periwinkle */
  --steady-wash: rgba(155, 181, 236, .14);

  /* Light sections on the public site */
  --bone: #fff8e8;
  --bone-2: #fbefd2;
  --bone-line: rgba(15, 31, 24, .14);
  --on-bone-2: #4d5a52;      /* secondary text on paper: 7.0:1 */
  --signal-on-bone: #a8361f; /* coral as text on paper: 6.1:1 */

  --sun: #f5c95e;
  --sun-deep: #e6a93a;
  --peri: #82a3e3;
  --coral: #e66363;
  --sage: #648f76;
  --pine: #1e3d2f;

  --f-display: "Anton", "Impact", "Arial Narrow", sans-serif;
  --f-body: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --step--1: clamp(.8rem, .78rem + .1vw, .86rem);
  --step-0: clamp(.98rem, .95rem + .15vw, 1.05rem);
  --step-1: clamp(1.2rem, 1.1rem + .4vw, 1.4rem);
  --step-2: clamp(1.5rem, 1.3rem + .9vw, 2rem);
  --step-3: clamp(2rem, 1.6rem + 1.8vw, 3rem);
  --step-4: clamp(2.6rem, 1.9rem + 3.6vw, 5rem);

  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --s-9: 7rem;
  --r: 6px;
  --r-2: 12px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-gun: cubic-bezier(.76, 0, .24, 1);
  --shadow: 0 18px 40px -18px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .25);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ink); color: var(--chalk); font: 400 var(--step-0)/1.55 var(--f-body); font-kerning: normal; -webkit-font-smoothing: antialiased; }
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { text-wrap: balance; margin: 0; }
p { text-wrap: pretty; }
::selection { background: var(--sun); color: #0f1f18; }
:focus-visible { outline: 2px solid var(--signal-hi); outline-offset: 3px; border-radius: 1px; }
input, textarea { caret-color: var(--signal-hi); }
html { scrollbar-color: #2f4a3c var(--ink); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: #2f4a3c; border-radius: 10px; border: 2px solid var(--ink); }
::-webkit-scrollbar-thumb:hover { background: var(--signal); }
.num, td.num, .tnum { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--f-mono); font-size: .78em; letter-spacing: .06em; text-transform: uppercase; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--s-4); top: -100px; z-index: 999; background: var(--signal); color: #fff; padding: var(--s-2) var(--s-4); }
.skip:focus { top: var(--s-4); }

/* ------------------------------------------------------------------ readability
   Prefixed with html so these win over component styles in site.css, app.css and area files regardless of load order.
   Small text is never below about 14px, labels are never the faint tone, and body copy sits a touch heavier. */
html body { font-weight: 400; line-height: 1.6; }
html .mono { font-size: .78rem; letter-spacing: .08em; }
html .faint, html .opt { color: var(--chalk-2); }
html .muted { color: var(--chalk-2); }
html .hint, html .fhint, html .fine { font-size: .95rem; color: var(--chalk-2); line-height: 1.5; }
html .ferr, html .err { font-size: .95rem; font-weight: 550; }

/* App screens */
html table.data th { font-size: .74rem; color: var(--chalk-2); }
html .stat dt { font-size: .9rem; color: var(--chalk-2); }
html .list .meta, html .small { font-size: .92rem; }
html .badge { font-size: .8rem; }
html .chart .axis { fill: var(--chalk-2); }