/* ==========================================================================
   buycycle LIFESTYLE Triathlon Würzburg: Tokens
   Richtung „Startunterlage“ (_design/RICHTUNG.md, Stand 29.09.2026)
   Tinte auf Papier, ein Gelb nur für das, was an den Start bringt.
   Zwei Familien: Archivo (Sprache) und Martian Mono (Gemessenes).
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var-latin.woff2") format("woff2-variations"),
       url("../fonts/archivo-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Martian Mono";
  src: url("../fonts/martianmono-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Martian Mono";
  src: url("../fonts/martianmono-latin-ext.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ---------- Farbe ---------- */
  --paper: #f4f4f1;        /* Grundfläche, ca. 70 % */
  --ink: #0a0a0a;          /* Text, Linien, dunkle Flächen */
  --graphite: #5c5c58;     /* Meta auf Papier, 6,3:1 */
  --stone: #8c8c87;        /* Meta auf Tinte, 6,0:1 */
  --rule: #d9d9d4;         /* Haarlinie auf Papier */
  --rule-dark: #262625;    /* Haarlinie auf Tinte */
  --yellow: #fefa00;       /* nur Anmelden, Startzeit, Strecke. Unter 3 % */
  --yellow-press: #ebe600; /* :active und Hover auf gelben Buttons */
  --error: #c8261b;
  --ok: #11795a;
  --ink-04: rgb(10 10 10 / 0.04);

  /* ---------- Schrift ---------- */
  --font: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --t-hero: clamp(48px, 9vw, 152px);
  --t-h1: clamp(40px, 6vw, 96px);
  --t-clock: clamp(40px, 6.4vw, 104px);
  --t-h2: clamp(28px, 3.2vw, 48px);
  --t-h3: clamp(20px, 0.6vw + 16px, 24px);
  --t-body: 17px;
  --t-small: 14px;
  --t-label: 11px;

  /* ---------- Raum (4er-Basis) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --s-11: 176px;

  --maxw: 1440px;
  --gap: clamp(16px, 2vw, 32px);
  --gutter: max(clamp(16px, 4vw, 64px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --section: clamp(96px, 14vh, 176px);
  --header-h: 64px;
  --bar-h: 64px;

  /* ---------- Form ---------- */
  --r-control: 2px;  /* einzige Ausnahme: Buttons und Felder */

  /* ---------- Bewegung ---------- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-move: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --d-press: 120ms;
  --d-hover: 160ms;
  --d-ui-in: 280ms;
  --d-ui-out: 200ms;
  --d-accordion: 240ms;
  --d-enter: 700ms;

  /* ---------- Ebenen ---------- */
  --z-header: 50;
  --z-bar: 45;
  --z-menu: 60;
  --z-consent: 70;
  --z-grain: 80;
}

@media (min-width: 1024px) {
  :root { --t-label: 12px; }
}