/*
 * Pitlane – Design-Tokens
 * ------------------------------------------------------------------
 * ALLE Farben, Schriften, Größen, Abstände und Radien des Themes stehen hier.
 * Ein anderes Design wird eingesetzt, indem nur diese Datei ersetzt wird –
 * die Templates bleiben unverändert.
 *
 * Richtung: Mockup-Variante D „Livery“, zurückgenommen (Entscheidung JP,
 * 27.09.2026): helle Fläche, Petrol + Orange wie eine Fahrzeug-Beklebung,
 * EIN schräges Livery-Band als Markenzeichen, sonst ruhig und gerade.
 * Bewusst anders als dunkle Neon-Gaming-Portale.
 */

/* Schriften: selbst gehostet (OFL, Lizenztexte in ../fonts/). */
@font-face { font-family: "Kanit"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/kanit-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Kanit"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/kanit-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Kanit"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/kanit-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Kanit"; font-weight: 800; font-style: italic; font-display: swap; src: url("../fonts/kanit-800-italic.woff2") format("woff2"); }
@font-face { font-family: "Kanit"; font-weight: 900; font-style: italic; font-display: swap; src: url("../fonts/kanit-900-italic.woff2") format("woff2"); }
@font-face { font-family: "Azeret Mono"; font-weight: 100 900; font-style: normal; font-display: swap; src: url("../fonts/azeret-mono-variable.woff2") format("woff2"); }

:root {
  color-scheme: light;

  /* --- Flächen --- */
  --pl-bg:            #F6F5F0;   /* Off-White */
  --pl-surface:       #FFFFFF;
  --pl-surface-2:     #EEEDE6;
  --pl-surface-3:     #E3E1D8;
  --pl-border:        #D9D6CB;
  --pl-border-strong: #111111;

  /* --- Text --- */
  --pl-text:          #111111;
  --pl-text-soft:     #3E3D38;
  --pl-text-muted:    #5A5952;
  --pl-text-faint:    #7C7A72;
  --pl-text-inverse:  #F6F5F0;

  /* --- Livery-Farben --- */
  --pl-primary:       #0E4D64;   /* Petrol: Flächen, Links */
  --pl-primary-hover: #08323F;
  --pl-accent:        #FF6B1A;   /* Orange: Aktionen */
  --pl-accent-hover:  #E85A0C;
  --pl-on-accent:     #111111;
  --pl-highlight:     #C6F432;   /* Lime: nur P1 / „neu“ */
  --pl-ink:           #111111;

  --pl-record:        #0E4D64;   /* Rekordzeiten */
  --pl-success:       #1F7A44;
  --pl-success-bg:    #E2F2E7;
  --pl-danger:        #B3261E;
  --pl-danger-bg:     #FBE7E4;
  --pl-podium-1:      #C6F432;
  --pl-podium-2:      #E3E1D8;
  --pl-podium-3:      #F5C9A8;

  /* --- Schrift --- */
  --pl-font-display:  "Kanit", "Arial Narrow", sans-serif;
  --pl-font-body:     "Kanit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pl-font-mono:     "Azeret Mono", ui-monospace, Menlo, Consolas, monospace;

  --pl-fs-hero:       clamp(3rem, 8vw, 7.5rem);
  --pl-fs-h1:         clamp(2.5rem, 5.5vw, 4.5rem);
  --pl-fs-h2:         clamp(2rem, 4.2vw, 3.75rem);
  --pl-fs-h3:         1.375rem;
  --pl-fs-lead:       1.25rem;
  --pl-fs-body:       1.0625rem;
  --pl-fs-small:      0.9375rem;
  --pl-fs-label:      0.8125rem;
  --pl-fs-time-xl:    clamp(2.5rem, 5vw, 3.75rem);
  --pl-lh-body:       1.55;
  --pl-lh-tight:      0.9;
  --pl-tracking-caps: 0.08em;
  --pl-skew:          -8deg;     /* Schräglage der Display-Schrift */
  --pl-band-angle:    -4deg;     /* Winkel des Livery-Bands */

  /* --- Abstände --- */
  --pl-space-1: 0.25rem;
  --pl-space-2: 0.5rem;
  --pl-space-3: 0.75rem;
  --pl-space-4: 1rem;
  --pl-space-5: 1.5rem;
  --pl-space-6: 2rem;
  --pl-space-7: 3rem;
  --pl-space-8: 4.5rem;
  --pl-space-9: 6.5rem;
  --pl-gutter:  clamp(1rem, 4vw, 3.5rem);
  --pl-maxw:    1328px;
  --pl-header-h: 84px;

  /* --- Formen --- */
  --pl-radius-s:  8px;
  --pl-radius-m:  12px;
  --pl-radius-l:  16px;
  --pl-radius-xl: 20px;
  --pl-radius-pill: 999px;
  --pl-line:      2px;           /* Konturstärke Karten/Buttons */
  --pl-focus: 0 0 0 3px rgba(255, 107, 26, 0.55);
  --pl-shadow: 0 10px 30px rgba(17, 17, 17, 0.08);
}
