/* ============================================================
   decoded.training — Colors & Type
   ------------------------------------------------------------
   Wissensplattform für den Schweizer Leichtathletik-Nachwuchs.
   "Erklärt wie Checker Tobi, gebaut wie Nike."

   Visual DNA:
   - Pure white paper + neutral charcoal ink (clean, never cream/tan)
   - TRACK clay-orange = hero brand colour (the tartan track)
   - VOLT lime = the "decode" signal — highlights, data, active
   - Mono data labels everywhere (angles, distances, speeds) —
     the instrumentation voice that earns the name "decoded".
   - Discipline palette: Lauf / Sprung / Wurf / Mehrkampf
   ============================================================ */

/* Fonts are self-hosted — see styles/fonts.css (no external font CDN, so no
   visitor IPs leak to Google). Load fonts.css before this file in the HTML. */

:root {
  /* -------- Brand core -------- */
  --ink:          #1A1A19; /* neutral near-black — primary ink, dark surfaces */
  --ink-soft:     #2A2A28; /* raised dark surface */
  --paper:        #FFFFFF; /* pure white page background */
  --paper-warm:   #F4F4F3; /* sunken neutral panel */
  --chalk:        #FFFFFF; /* pure white — cards, lane lines */

  --track:        #E8502A; /* HERO — tartan-track clay orange-red */
  --track-deep:   #C23C18; /* pressed / hover */
  --track-soft:   #F7C9B6; /* tints, fills */

  --volt:         #C8F23A; /* SIGNAL — electric lime, "decoded" highlight */
  --volt-deep:    #A6CE1C; /* on light, text/borders */
  --volt-soft:    #EAF9B8; /* highlight wash */

  /* -------- Discipline palette --------
     Used to colour-code the platform by event family. -------- */
  --lauf:    #E8502A; /* Lauf / Sprint — track orange */
  --sprung:  #2E7DF6; /* Sprung — sky / air blue */
  --wurf:    #8A3FE0; /* Wurf — power violet */
  --mehrkampf:#16A06B; /* Mehrkampf — combined green */
  --lauf-soft:    #FAD8CC;
  --sprung-soft:  #D2E4FE;
  --wurf-soft:    #E6D6FA;
  --mehrkampf-soft:#CDEEE0;

  /* -------- Neutrals (clean near-neutral ramp — a whisper warm, never tan, never blue-grey) -------- */
  --n-0:   #FFFFFF;
  --n-50:  #F7F6F5;
  --n-100: #EEEDEB;
  --n-200: #E0DEDB;
  --n-300: #C8C5C1;
  --n-400: #A19E99;
  --n-500: #757370;
  --n-600: #54524F;
  --n-700: #393735;
  --n-800: #232221;
  --n-900: #1A1A19;

  /* -------- Semantic foreground / background -------- */
  --bg-page:      var(--paper);
  --bg-surface:   var(--chalk);
  --bg-sunken:    var(--paper-warm);
  --bg-inverse:   var(--ink);
  --bg-inverse-2: var(--ink-soft);
  --bg-signal:    var(--volt);
  --bg-accent:    var(--track);

  --fg-1:          var(--n-900); /* primary text */
  --fg-2:          var(--n-700); /* secondary text — confident charcoal */
  --fg-3:          var(--n-500); /* muted / meta — neutral grey */
  --fg-on-inverse: #F7F6F5;
  --fg-on-inverse-2:#ABA9A5;     /* muted text on dark */
  --fg-on-accent:  #FFFFFF;       /* text on track orange */
  --fg-on-signal:  var(--ink);    /* text on volt lime */
  --fg-link:       var(--track-deep);
  --fg-link-hover: var(--track);

  /* -------- Functional / status -------- */
  --success: #1E9E63;
  --warning: #E6A12C;
  --danger:  #D63B2A;
  --info:    var(--sprung);

  /* -------- Borders & dividers -------- */
  --border-1:      #EBEAE7; /* very light hairline (use sparingly — prefer shadow) */
  --border-2:      #D6D4CF; /* inputs, stronger dividers */
  --border-strong: var(--ink);
  --border-dash:   var(--n-300); /* dashed "annotation" rules */

  /* -------- Shadows (athletic — tight elevation + offset "sticker" pop) -------- */
  --shadow-xs:  0 1px 0 rgba(20,20,18,.05);
  --shadow-sm:  0 1px 2px rgba(20,20,18,.08), 0 1px 1px rgba(20,20,18,.05);
  --shadow-md:  0 8px 22px -10px rgba(20,20,18,.20), 0 2px 6px rgba(20,20,18,.07);
  --shadow-lg:  0 28px 56px -20px rgba(20,20,18,.32);
  --shadow-pop: 5px 5px 0 var(--ink);     /* offset block — checkerfrage / sticker energy */
  --shadow-pop-volt: 5px 5px 0 var(--volt-deep);
  --ring-focus: 0 0 0 3px rgba(200,242,58,.65); /* volt focus ring */

  /* -------- Cool / energy layer (dark-first hype UI) -------- */
  --ink-0:   #0E0E0D; /* deepest canvas */
  --ink-1:   #1A1A19; /* base dark surface */
  --ink-2:   #232221; /* raised dark card */
  --ink-3:   #2E2C2A; /* hairline / border on dark */
  --glow-volt:  0 0 0 1px rgba(200,242,58,.5), 0 0 28px -4px rgba(200,242,58,.55);
  --glow-track: 0 0 0 1px rgba(232,80,42,.5), 0 0 30px -4px rgba(232,80,42,.6);
  --grain-volt: radial-gradient(120% 90% at 78% 8%, rgba(200,242,58,.18), transparent 55%);
  --grain-track:radial-gradient(120% 90% at 22% 8%, rgba(232,80,42,.30), transparent 55%);
  --border-dark: rgba(255,255,255,.10);

  /* -------- Radii — friendly but not bubbly -------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* -------- Spacing scale (4px base) -------- */
  --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;

  /* -------- Typography stacks --------
     Display — Anton: ultra-bold condensed poster face. The Nike-poster
       voice. UPPERCASE, tight. Big statements & big numbers only.
     Sans    — Archivo: grotesque workhorse for headings, UI and body.
       Reads modern, athletic, very legible for 13–17 yr olds.
     Mono    — Space Mono: the "decoded" instrumentation voice. Data,
       measurements, eyebrows, tags, Checkerfrage labels. -------- */
  --font-display: "Anton", "Arial Narrow", sans-serif;
  --font-sans:    "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* -------- Type scale -------- */
  --fs-display-2xl: clamp(64px, 9vw, 128px);
  --fs-display-xl:  clamp(48px, 6.5vw, 96px);
  --fs-display:     clamp(40px, 5vw, 64px);
  --fs-h1:          clamp(34px, 4vw, 52px);
  --fs-h2:          clamp(26px, 3vw, 38px);
  --fs-h3:          26px;
  --fs-h4:          20px;
  --fs-lead:        19px;
  --fs-body:        16px;
  --fs-sm:          14px;
  --fs-xs:          12px;
  --fs-eyebrow:     12px; /* mono uppercase label */
  --fs-micro:       11px;

  --lh-tight:   1.02;
  --lh-snug:    1.15;
  --lh-normal:  1.55;
  --lh-relaxed: 1.7;

  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-eyebrow: 0.16em; /* mono uppercase labels / tags */

  /* -------- Motion --------
     Mostly crisp ease-out. A single spring is reserved for playful
     "Checker" moments (reveal of an answer, a stamp) — used sparingly. -------- */
  --ease-out:    cubic-bezier(.2,.7,.2,1);
  --ease-in:     cubic-bezier(.6,.04,.7,.2);
  --ease-spring: cubic-bezier(.34,1.4,.5,1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* -------- Layout -------- */
  --max-w-content: 1200px;
  --max-w-prose:   68ch;
}

/* ============================================================
   Semantic element styles
   ============================================================ */

html { color: var(--fg-1); background: var(--bg-page); }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Poster display — Anton. UPPERCASE statements & numbers. */
.display, .display-2xl, .display-xl {
  font-family: var(--font-display);
  font-weight: 400; /* Anton ships single-weight, already heavy */
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  margin: 0;
}
.display-2xl { font-size: var(--fs-display-2xl); }
.display-xl  { font-size: var(--fs-display-xl); }
.display     { font-size: var(--fs-display); }

h1, .h1 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--s-4);
}
h2, .h2 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--s-3);
}
h3, .h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  margin: 0 0 var(--s-3);
}
h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  margin: 0 0 var(--s-2);
}

.lead { font-size: var(--fs-lead); color: var(--fg-2); line-height: var(--lh-relaxed); }
.meta { font-size: var(--fs-sm); color: var(--fg-3); }

/* Eyebrow / data label — the mono "decoded" voice. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--track-deep);
}

/* Data readout — a measurement printed like instrumentation. */
.data {
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

p { margin: 0 0 var(--s-4); max-width: var(--max-w-prose); }

a { color: var(--fg-link); text-decoration: none; }
a:hover { color: var(--fg-link-hover); text-decoration: underline; text-underline-offset: 2px; }

code, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; }
code {
  background: var(--n-100);
  border-radius: var(--r-xs);
  padding: 1px 6px;
}

hr {
  border: 0;
  border-top: 1px solid var(--border-1);
  margin: var(--s-7) 0;
}

::selection { background: var(--volt); color: var(--ink); }

/* ============================================================
   Reusable atoms (used by preview cards & UI kit)
   ============================================================ */

/* Buttons --------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 1;
  padding: 14px 22px;
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--ring-focus); }

.btn--primary { background: var(--track); color: var(--fg-on-accent); }
.btn--primary:hover { background: var(--track-deep); }

.btn--signal { background: var(--volt); color: var(--fg-on-signal); }
.btn--signal:hover { background: var(--volt-deep); }

.btn--ink { background: var(--ink); color: var(--fg-on-inverse); }
.btn--ink:hover { background: var(--ink-soft); }

.btn--ghost { background: transparent; color: var(--fg-1); border-color: var(--border-2); }
.btn--ghost:hover { border-color: var(--fg-1); background: var(--n-100); }

.btn--sm { padding: 9px 14px; font-size: var(--fs-xs); }
.btn--lg { padding: 17px 30px; font-size: var(--fs-body); }

/* Tags / badges --------------------------------------------- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  padding: 5px 10px;
  border-radius: var(--r-pill);
  background: var(--n-100);
  color: var(--n-700);
  line-height: 1;
  border: 1px solid var(--border-1);
}
.tag--track  { background: var(--track); color: #fff; border-color: transparent; }
.tag--volt   { background: var(--volt); color: var(--ink); border-color: transparent; }
.tag--ink    { background: var(--ink); color: var(--fg-on-inverse); border-color: transparent; }
.tag--ghost  { background: transparent; }

/* Discipline pills ------------------------------------------ */
.disc { --c: var(--n-500); --cs: var(--n-100);
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
  padding: 5px 11px 5px 9px; border-radius: var(--r-pill);
  background: var(--cs); color: var(--c); line-height: 1;
}
.disc::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--c); }
.disc--lauf     { --c: var(--lauf);    --cs: var(--lauf-soft); }
.disc--sprung   { --c: var(--sprung);  --cs: var(--sprung-soft); }
.disc--wurf     { --c: var(--wurf);    --cs: var(--wurf-soft); }
.disc--mehrkampf{ --c: var(--mehrkampf);--cs: var(--mehrkampf-soft); }

/* Card ------------------------------------------------------ */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

/* Checkerfrage — the signature curiosity prompt. */
.checkerfrage {
  background: var(--ink);
  color: var(--fg-on-inverse);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop-volt);
  padding: var(--s-5) var(--s-6);
}