/* Blue Light Coach — design tokens.
   Canonical values. CLAUDE.md's design-system table must match this file —
   if one changes, change the other in the same commit. */

:root {
  --navy-950: #07182f;
  --navy-900: #0a1e3c;
  --navy-800: #102b52;
  --blue:     #1a6bff;
  --blue-dark:#0f55d2;
  --yellow:   #ffd100;
  --paper:    #F7F9FC;
  --white:    #ffffff;
  --ink:      #101828;
  --muted:    #4a5568;
  --line:     #d5dfed;
  --soft-blue:#eaf1ff;
  --danger:   #D92D20;
  --danger-soft: #FDECEA;

  --display: "Archivo Black", Impact, sans-serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --shadow: 0 18px 50px rgba(7, 24, 47, 0.12);
}

/* ---- base reset — every page starts from this ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
a { color: inherit; }
button, input, textarea, select { font: inherit; }

/* ---- focus ring follows the surface it sits on ----
   Yellow is invisible on --paper, so light surfaces default to navy —
   deliberately, not blue: navy has the strongest contrast against
   #F7F9FC, where blue on a pale blue-tinted background is weaker.
   Wrap a dark-background section in [data-surface="dark"] to flip it. */
:focus-visible { outline: 3px solid var(--navy-900); outline-offset: 3px; }
[data-surface="dark"] :focus-visible,
[data-surface="dark"]:focus-visible { outline-color: var(--yellow); }

/* ---- shared utility ----
   One name everywhere. Source order matters: anything declaring its own
   `display` later in the cascade beats this — keep .hide toggles as the
   last word on visibility for an element, not fought with another rule. */
.hide { display: none !important; }

/* ---- shared page chrome ----
   Tool pages (shift-check, assessment, tool, treadmill) get this minimal
   strip instead of the full site header — logo home, nothing else, so a
   shared link opens straight into the tool. index.html and privacy.html
   use the full header/nav below instead of this.
   .top itself stays a bare flex row with no box model of its own —
   tool.html reuses the class name for its pace/units row, so anything
   sized or spaced here would leak into that unrelated element too.
   .tool-top is the full-bleed navy band around the logo strip; the
   sizing/spacing lives there, scoped to .tool-top .top only. */
.top { display: flex; align-items: center; gap: 10px; }
.top img { display: block; height: 26px; width: auto; }
.top a { display: block; }

.tool-top { background: var(--navy-950); }
.tool-top .top {
  max-width: var(--content-max, 540px); margin: 0 auto; padding: 14px 18px;
}

/* ---- full site header/nav/footer ----
   Shared by index.html and privacy.html — the two pages that carry the
   full lockup rather than the minimal strip above. logo-transparent.png's
   strapline and colour bar need real size to read; .brand img steps down
   at each breakpoint rather than holding one size, so the nav still fits
   comfortably at 390px. */
.skip-link {
  position: absolute; left: 1rem; top: -5rem; z-index: 100;
  background: var(--yellow); color: var(--navy-950); font-weight: 800;
  padding: .75rem 1rem; border-radius: .4rem;
}
.skip-link:focus { top: 1rem; }
.shell { width: min(1160px, calc(100% - 2.25rem)); margin-inline: auto; }

.site-head { background: var(--navy-950); color: var(--white); }
.nav {
  min-height: 100px; display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; border-bottom: 1px solid rgba(255,255,255,.12);
}
.brand { display: inline-flex; align-items: center; gap: .8rem; text-decoration: none; }
.brand img { display: block; width: auto; height: 64px; }
.footer-logo { display: block; width: auto; height: 44px; }
.nav-links { display: flex; align-items: center; gap: 1.7rem; }
.nav-links a { color: #dce7f7; font-size: .9rem; font-weight: 700; text-decoration: none; }
.nav-links a:hover { color: var(--white); }
.nav-links .nav-cta { color: var(--navy-950); background: var(--yellow); padding: .72rem 1rem; border-radius: 5px; }
.nav-links .nav-cta:hover { color: var(--navy-950); background: #ffe04d; }

footer { background: #041224; color: #a8bcd4; padding: 2.1rem 0 calc(2.1rem + env(safe-area-inset-bottom)); }
.footer-grid { display: flex; align-items: start; justify-content: space-between; gap: 2rem; }
.footer-copy { max-width: 650px; font-size: .76rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: .75rem 1.2rem; margin-top: .6rem; }
.footer-links a:hover { color: var(--white); }

@media (max-width: 900px) {
  .brand img { height: 48px; }
}

@media (max-width: 680px) {
  .nav { min-height: 70px; }
  .brand img { height: 40px; }
  .nav-links { gap: 1rem; }
  .nav-links .nav-cta { display: none; }
  .nav-links a:not(.nav-cta) { font-size: .8rem; }
  .footer-grid { display: block; }
  .footer-copy { margin-top: .8rem; }
}

/* Light cards sitting inside an otherwise-dark section (the white start
   panel inside the navy hero, the white enquiry form inside the navy
   coaching section) must not inherit the dark-surface yellow ring — they
   sit on white, so they keep the navy default. Higher specificity than
   the [data-surface="dark"] rule above, so this wins regardless of
   source order. */
.hero .start-panel :focus-visible, .hero .start-panel:focus-visible,
.coaching .enquiry :focus-visible, .coaching .enquiry:focus-visible {
  outline-color: var(--navy-900);
}

/* Every page gets this footer — the discovery route back to the other
   tools and the privacy notice when a page was reached via a shared link
   rather than the homepage. Full-bleed navy so it reads as the bottom of
   the page; .foot-inner pins the actual content to the page's own
   --content-max, same as .tool-top above. A dark surface, so its own
   colours are set explicitly rather than left to inherit from --muted/
   --blue, which are tuned for text on --paper. */
.site-foot {
  background: var(--navy-950); color: #a8bcd4; margin-top: 32px; padding: 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.site-foot .foot-inner {
  max-width: var(--content-max, 540px); margin: 0 auto;
  padding: 20px 18px calc(20px + env(safe-area-inset-bottom));
}
.site-foot nav { display: flex; flex-wrap: wrap; gap: .6rem 1.1rem; margin-bottom: 10px; }
.site-foot nav a { font-size: 13.5px; font-weight: 600; color: #dce7f7; text-decoration: none; }
.site-foot nav a:hover { color: var(--white); text-decoration: underline; }
.site-foot p { font-size: 12.5px; color: #a8bcd4; }
.site-foot p a { color: #dce7f7; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}