/* ==========================================================================
   Tennisheim Bettringen – tokens.css
   Stil „Sandplatz & Verein“: Farben und Schrift aus Speisekarte und Vereinslogo.
   Kontrastwerte (WCAG) stehen jeweils dahinter.
   ========================================================================== */

/* Schriften liegen auf dem eigenen Server (assets/fonts/, Lizenz siehe dort):
   Es wird nichts von Google nachgeladen. Nur der lateinische Zeichensatz –
   genug für Deutsch, „“, – und €. */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../assets/fonts/bricolage-grotesque-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Kaushan Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/kaushan-script-latin.woff2') format('woff2');
}

:root {
  /* Farben – Grund */
  --color-paper: #F6F2EA;          /* warmes Papier, Seitenhintergrund */
  --color-sand: #ECE4D4;           /* helle Sandfläche für Wechselsektionen */
  --color-surface: #FFFFFF;
  --color-line: #DDD4C3;           /* Haarlinien */

  /* Farben – Schrift */
  --color-ink: #1B1A17;            /* auf paper 15,6:1 */
  --color-ink-muted: #5E5A52;      /* auf paper 6,2:1, auf sand 5,4:1 */

  /* Farben – Marke */
  --color-clay: #A94B24;           /* Sandplatz-Terrakotta, Weiß darauf 5,7:1 */
  --color-clay-dark: #8A3B1A;
  --color-clay-light: #F1DCCB;
  --color-charcoal: #262522;       /* Anthrazit wie die Speisekarte */
  --color-charcoal-soft: #33312D;
  --color-on-dark-muted: #A8A196;  /* auf Anthrazit 6,0:1 */
  --color-ball: #DCE33B;           /* Tennisball-Gelb – nur als Akzent, auf Anthrazit 11:1 */

  /* Farben – Status */
  --color-success: #2F6B45;        /* auf paper 5,7:1 */
  --color-success-bg: #E3EDE3;
  --color-error: #B3261E;

  /* Typografie */
  --font-base: 'Bricolage Grotesque', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --font-script: 'Kaushan Script', 'Brush Script MT', cursive;

  /* Schriftgrößen – wachsen mit der Bildschirmbreite mit */
  --text-xs: 0.8125rem;                                         /* 13px, nur Badges */
  --text-sm: 0.9375rem;                                         /* 15px */
  --text-base: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);      /* 17 → 19px */
  --text-lead: clamp(1.1875rem, 1.05rem + 0.5vw, 1.4375rem);    /* 19 → 23px */
  --text-h4: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem);       /* 19 → 22px */
  --text-h3: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);         /* 22 → 30px */
  --text-h2: clamp(2.125rem, 1.4rem + 3vw, 4rem);               /* 34 → 64px */
  --text-h1: clamp(3rem, 1.5rem + 6.4vw, 6.5rem);               /* 48 → 104px */
  --text-script: clamp(1.75rem, 1.35rem + 1.8vw, 2.75rem);      /* 28 → 44px */

  /* Abstände (8px-Raster) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
  --space-9: 128px;
  --section-y: clamp(4rem, 2.4rem + 6.5vw, 8rem);               /* 64 → 128px */

  /* Radien: Pillen für Bedienelemente, groß für Bilder/Karten, klein für Felder */
  --radius-sm: 6px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Schatten */
  --shadow-sm: 0 1px 2px rgba(27, 26, 23, 0.08);
  --shadow-md: 0 8px 24px -8px rgba(27, 26, 23, 0.22);
  --shadow-lg: 0 28px 56px -20px rgba(27, 26, 23, 0.4);

  /* Bewegung */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-reveal: 900ms;
  --dur-flip: 800ms;

  /* Layout */
  --container-max: 1240px;
  --header-h: 72px;
}