/* Athlyze shared design tokens + base rules ("Énergie" palette, dark and light), loaded by
   every page: the landing (index.html, whose own components live in landing.css) and the app
   (static/app.css builds on these tokens). Fonts load from Google Fonts (see
   the <link> tags in index.html's <head> / APP_CSS's _page() template) rather than being
   self-hosted as base64 data-URIs like the previous "ember" theme was - a deliberate
   simplification, at the cost of one third-party request per visitor. */

:root {
  /* Native controls (the date input's calendar icon, scrollbars, select arrows) drawn for
     the dark ground - redeclared light in [data-theme="light"] below. */
  color-scheme: dark;
  /* "Énergie" palette (dark): near-black ground, raised cards, signal blue for every accent.
     --bg-sink is the tone INSIDE a card (stat tiles, inputs, zone rows): lighter than the
     card here, the way the design reads - a tile sits on its card, not sunk into it. */
  --bg: #0a0d14;
  --bg-raise: #151a24;
  --bg-sink: #1d2432;
  --line: #222a38;
  --line-soft: #1a2130;
  --fg: #ffffff;
  --fg-dim: #9aa5b8;
  --signal: #2f7bff;
  --signal-ink: #ffffff;
  --signal-text: #6ea2ff;
  --signal-soft: #16233d;
  --go: #34d399;
  --go-bg: rgba(52, 211, 153, 0.16);
  --warn: #fb923c;
  --warn-bg: rgba(251, 146, 60, 0.16);
  --teal: oklch(78% 0.14 195);
  /* The blue band pages open on (see .e-band) and the "hero" card that overlaps it. */
  --band: #1458e6;
  --band-ink: #ffffff;
  --band-dim: #d4e0ff;
  --card-line: #222a38;
  --hero: #151a24;
  --hero-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-body: 'Manrope', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* Light theme override - opt-in via [data-theme="light"] on <html>, set per-tenant from the
   dashboard's Compte tab (see templates._dashboard_shell) - dark is the default everywhere.
   The marketing landing page never sets this attribute, so it always stays on the dark palette above regardless of any
   tenant's preference. Every accent is re-picked for a white ground (darker go/warn, a
   deeper blue) so colored text keeps a 4.5:1 contrast - not just the neutral ramp flipped. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff;
  --bg-raise: #f4f6fa;
  --bg-sink: #ffffff;
  --line: #e1e6ee;
  --line-soft: #e9edf3;
  --fg: #0d1117;
  --fg-dim: #4f5868;
  --signal: #1463ff;
  --signal-ink: #ffffff;
  --signal-text: #1463ff;
  --signal-soft: #e5edff;
  --go: #0b7a43;
  --go-bg: #e3f5ec;
  --warn: #b84f00;
  --warn-bg: #fff0e0;
  --band: #1463ff;
  --band-ink: #ffffff;
  --band-dim: #dce6ff;
  --card-line: transparent;
  --hero: #ffffff;
  --hero-shadow: 0 8px 24px rgba(13, 30, 70, 0.12);
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); }
img { max-width: 100%; }

/* Themed scrollbars everywhere (both the page and any inner overflow:auto panel - the year/
   month rail, chat threads, code blocks...) instead of the browser's stock chrome, which stood
   out against this dark theme. scrollbar-width/-color are inherited, so setting them once on
   :root reaches every scroll container on the page - no need to repeat per element. */
:root { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background-color: var(--line); border-radius: 20px; border: 2px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--fg-dim); }
a { color: var(--signal); text-decoration: none; }
a:hover { color: color-mix(in srgb, var(--signal) 85%, white); }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
/* scroll-margin-top so the sticky nav (position:sticky, see nav.top below) doesn't cover a
   section's heading when a nav link jumps straight to its #id - found by actually testing
   anchor navigation, not just eyeballing the static layout. header.hero gets its own
   scroll-margin-top rule further down (next to .hero) rather than being folded in here,
   since header.hero's higher selector specificity would otherwise win over .hero's padding
   and border-bottom below and silently override them. */
section { scroll-margin-top: 84px; padding: 96px 0; border-bottom: 1px solid var(--line-soft); }
.eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--signal); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; margin: 0; color: var(--fg); letter-spacing: -0.01em; }
h2 { font-size: clamp(26px, 3vw, 38px); margin-top: 12px; max-width: 680px; line-height: 1.15; }
h3 { font-size: 17px; }
p { color: var(--fg-dim); line-height: 1.65; margin: 0; font-size: 15px; }
.section-head p { margin-top: 14px; max-width: 600px; font-size: 16px; }

.btn { font-family: var(--font-mono); font-size: 13px; letter-spacing: .02em; padding: 13px 22px; border-radius: 7px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; border: 1px solid transparent; font-weight: 500; }
.btn-primary { background: var(--signal); color: var(--signal-ink); font-weight: 600; }
.btn-ghost { border-color: var(--line); color: var(--fg); }
/* Pin the label color on hover: these are <a>, and the generic a:hover above would turn the
   text blue (on a blue .btn-primary: unreadable). */
.btn-primary:hover { color: var(--signal-ink); background: color-mix(in srgb, var(--signal) 86%, black); }
.btn-ghost:hover { color: var(--fg); background: var(--bg-raise); }
.btn-block { width: 100%; justify-content: center; box-sizing: border-box; }

.wordmark { display: flex; align-items: center; gap: 9px; color: var(--fg); font-family: var(--font-display); font-weight: 700; font-size: 18px; }

.legal-body { font-size: 0.9rem; line-height: 1.6; color: var(--fg-dim); }
.legal-body h2 { font-family: var(--font-display); font-size: 1rem; color: var(--fg); margin: 20px 0 6px; }
.legal-body p { margin: 0 0 10px; }
.legal-body ul { margin: 0 0 10px; padding-left: 20px; }
.legal-body li { margin: 4px 0; }
.legal-updated { font-size: 0.8rem; opacity: .8; }
.legal-nav { margin-top: 22px !important; padding-top: 14px; border-top: 1px solid var(--line-soft); font-size: 0.85rem; }
.legal-body a.back { display: inline-block; margin-top: 18px; color: var(--signal); }