/* 140.6 web tokens. Mirrors src/lib/theme.ts: same canvas, ink, discipline
   colors, glass roles, and Inter faces. Do not add a second palette here. */

@font-face { font-family: Inter; src: url("/assets/fonts/Inter_400Regular.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: Inter; src: url("/assets/fonts/Inter_600SemiBold.ttf") format("truetype"); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: Inter; src: url("/assets/fonts/Inter_700Bold.ttf") format("truetype"); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: Inter; src: url("/assets/fonts/Inter_800ExtraBold.ttf") format("truetype"); font-style: normal; font-weight: 800; font-display: swap; }

:root {
  color-scheme: dark;

  /* Text */
  --ink: #f4f5f7;
  --muted: #aab1c4;
  --faint: #7e87a1;

  /* Canvas and glass roles */
  --bg: #040812;
  --card: rgba(9, 22, 43, .96);
  --glass: rgba(4, 14, 38, .36);
  --glass-dark: rgba(2, 8, 24, .40);
  --glass-rim: rgba(174, 200, 235, .16);
  --line: rgba(174, 200, 235, .14);
  --line-strong: rgba(174, 200, 235, .18);
  --line-soft: rgba(255, 255, 255, .065);
  --emphasis: rgba(39, 22, 66, .96);
  --selected: rgba(115, 88, 216, .14);
  --selection-fill: rgba(115, 88, 216, .34);
  --secondary-button: rgba(22, 50, 92, .78);
  --secondary-button-border: rgba(215, 232, 255, .18);

  /* Brand and disciplines */
  --violet: #7358d8;
  --violet-light: #a897f0;
  --swim: #68abe8;
  --swim-tint: #102b3a;
  --bike: #e2c266;
  --bike-tint: #3a2e10;
  --run: #dd8168;
  --run-tint: #3a1c16;
  --fuel: #c3d86b;
  --caution: #b25e2f;

  /* Type */
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tabular: "tnum" 1, "lnum" 1;

  /* Geometry */
  --radius-md: 16px;
  --radius-sm: 11px;
  --max: 1180px;
  --gutter: clamp(18px, 4vw, 56px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  min-width: 320px;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--violet-light); outline-offset: 4px; border-radius: 8px; }
h1, h2, h3, p, ol, ul, dl { margin-top: 0; }
h1, h2, h3 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
img, svg { max-width: 100%; }
[hidden] { display: none !important; }

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

.skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  transform: translateY(-160%);
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--bg);
  font-weight: 700;
}
.skip-link:focus { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}