/* ============================================================
   Karatepraxis — Design Tokens (Single Source of Truth)
   Root auf 100% (16px) normalisiert (überschreibt Bricks-Core
   html{font-size:62.5%}). Saubere rem-Skala, portabel auf jede
   Bricks-Seite. PX nur für 1px-Hairline-Border.
   ============================================================ */

/* Root-Flip: Bricks-Core setzt 62.5% (10px) un-layered; diese Regel
   lädt später (Prio 99) und gewinnt -> 1rem = 16px wie überall sonst.
   Respektiert Browser-Font-Pref (a11y) durch %, nicht px. */
html { font-size: 100%; }

:root{
  /* ---------- Farben ---------- */
  --c-red:#b80000;            /* Marken-Rot */
  --c-red-dark:#8f0000;       /* Hover / Pressed */
  --c-red-tint:rgba(184,0,0,.08);
  --c-ink:#111111;            /* Haupt-Dunkel (Flächen) */
  --c-ink-2:#1d1d1d;          /* dunkle Karte/Fläche */
  --c-navy:#112337;           /* sekundäres Dunkelblau */
  --c-navy-2:#263238;
  --c-paper:#ffffff;
  --c-paper-2:#f5f5f5;
  --c-text:#1a1a1a;           /* Body auf Hell (AA) */
  --c-text-on-dark:#e6e6e6;   /* Body auf Dunkel */
  --c-muted:#5a5a5a;          /* Sekundärtext auf Hell, >=4.5:1 */
  --c-muted-on-dark:#a8a8a8;
  --c-line:#dddedf;           /* Hairline hell */
  --c-line-dark:#2a2a2a;      /* Hairline dunkel */
  --c-white:#ffffff;
  --c-black:#000000;

  /* ---------- Typografie ---------- */
  --font-sans:Helvetica,"Helvetica Neue",Arial,sans-serif;
  --lh-tight:1.1; --lh-snug:1.3; --lh-body:1.6;
  --fs-xs:.75rem;             /* 12 */
  --fs-sm:.875rem;            /* 14 — Minimum, killt 10px */
  --fs-body:1rem;             /* 16 */
  --fs-md:1.125rem;           /* 18 */
  --fs-lead:clamp(1.125rem,1.6vw + 1rem,1.375rem);
  --fs-h5:1.125rem;
  --fs-h4:1.25rem;
  --fs-h3:clamp(1.375rem,2vw + 1rem,1.75rem);
  --fs-h2:clamp(1.75rem,3.5vw + 1rem,2.5rem);
  --fs-h1:clamp(2.25rem,5vw + 1rem,3.5rem);
  --fs-display:clamp(3rem,7vw + 1rem,5rem);
  --tracking:.02em;
  --tracking-wide:.12em;

  /* ---------- Spacing-Skala ---------- */
  --space-3xs:.25rem;  /* 4  */
  --space-2xs:.5rem;   /* 8  */
  --space-xs:.75rem;   /* 12 */
  --space-sm:1rem;     /* 16 */
  --space-md:1.5rem;   /* 24 */
  --space-lg:2rem;     /* 32 */
  --space-xl:3rem;     /* 48 */
  --space-2xl:4rem;    /* 64 */
  --space-3xl:6rem;    /* 96 */
  --space-4xl:8rem;    /* 128 */
  --section-y:clamp(3rem,7vw,6rem);
  --gap:1.5rem;
  --gap-sm:.75rem;

  /* ---------- Layout ---------- */
  --container:75rem;          /* 1200 */
  --container-wide:90rem;     /* 1440 */
  --container-pad:clamp(1.25rem,5vw,4rem);

  /* ---------- Radius / Border / Shadow ---------- */
  --radius-sm:.25rem;
  --radius:.5rem;
  --radius-lg:1rem;
  --radius-pill:100vmax;
  --radius-circle:50%;
  --border-w:1px;             /* einzige px-Ausnahme: Hairline */
  --shadow-sm:0 .0625rem .25rem rgba(0,0,0,.08);
  --shadow:0 .75rem 2rem rgba(0,0,0,.12);

  /* ---------- Tap-Target (>=44px) ---------- */
  --tap:2.75rem;

  /* ---------- Motion ---------- */
  --ease:cubic-bezier(.2,.7,.2,1);
  --dur:.24s;
}