/* Fichier généré par bin/build-tokens depuis design/tokens.json — ne pas modifier à la main. */
/* South Padel Park design tokens v0.7.0 — spec docs/architecture/15-design-system.md */

@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/display.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/text.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/text-italic.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Big Shoulders"; src: url("../fonts/sport.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --spp-color-night: #0A0A0A;
  --spp-color-charcoal: #161616;
  --spp-color-ink: #0A0A0A;
  --spp-color-chalk: #FFFFFF;
  --spp-color-offwhite: #FFFFFF;
  --spp-color-stone: #F2F2F2;
  --spp-color-sand: #C9B99A;
  --spp-color-volt: #D7FC00;
  --spp-color-volt-600: #B8D900;
  --spp-color-warmgrey: #A3A3A3;
  --spp-color-warmgrey-700: #5E5E5E;
  --spp-color-court: #0084FD;
  --spp-color-court-700: #005CB8;
  --spp-color-green: #3F5B4A;
  --spp-color-success: #2E7D5B;
  --spp-color-warning: #C98A2B;
  --spp-color-warning-700: #96641C;
  --spp-color-danger: #B8433E;
  --spp-color-danger-300: #E0625C;
  --spp-color-info: #005CB8;
  --spp-color-white: #FFFFFF;
  --spp-color-court-050: #F2F7FE;
  --spp-color-court-950: #10263F;
  --spp-color-graphite: #262626;
  --spp-color-silver: #E5E5E5;
  --spp-font-display: "Bricolage Grotesque", "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --spp-font-sport: "Big Shoulders", "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --spp-font-text: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --spp-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --spp-text-display: clamp(2.75rem, 0.8913rem + 8.261vw, 7.5rem);
  --spp-text-display-weight: 500;
  --spp-text-display-leading: 0.88;
  --spp-text-display-tracking: -0.035em;
  --spp-text-h1: clamp(2.375rem, 1.1522rem + 5.435vw, 5.5rem);
  --spp-text-h1-weight: 500;
  --spp-text-h1-leading: 0.94;
  --spp-text-h1-tracking: -0.03em;
  --spp-text-h2: clamp(1.75rem, 1.163rem + 2.609vw, 3.25rem);
  --spp-text-h2-weight: 600;
  --spp-text-h2-leading: 1;
  --spp-text-h2-tracking: -0.025em;
  --spp-text-h3: clamp(1.25rem, 1.0543rem + 0.870vw, 1.75rem);
  --spp-text-h3-weight: 600;
  --spp-text-h3-leading: 1.15;
  --spp-text-h3-tracking: -0.015em;
  --spp-text-h4: clamp(1.0625rem, 0.9891rem + 0.326vw, 1.25rem);
  --spp-text-h4-weight: 600;
  --spp-text-h4-leading: 1.3;
  --spp-text-body-l: clamp(1.125rem, 1.0761rem + 0.217vw, 1.25rem);
  --spp-text-body-l-weight: 400;
  --spp-text-body-l-leading: 1.55;
  --spp-text-body: clamp(1rem, 0.9755rem + 0.109vw, 1.0625rem);
  --spp-text-body-weight: 400;
  --spp-text-body-leading: 1.55;
  --spp-text-small: 0.875rem;
  --spp-text-small-weight: 400;
  --spp-text-small-leading: 1.45;
  --spp-text-label: clamp(0.75rem, 0.7255rem + 0.109vw, 0.8125rem);
  --spp-text-label-weight: 600;
  --spp-text-label-leading: 1.2;
  --spp-text-label-tracking: 0.14em;
  --spp-text-caption: 0.75rem;
  --spp-text-caption-weight: 400;
  --spp-text-caption-leading: 1.4;
  --spp-text-button: clamp(0.9375rem, 0.913rem + 0.109vw, 1rem);
  --spp-text-button-weight: 600;
  --spp-text-button-leading: 1;
  --spp-space-0: 0px;
  --spp-space-1: 4px;
  --spp-space-2: 8px;
  --spp-space-3: 12px;
  --spp-space-4: 16px;
  --spp-space-5: 24px;
  --spp-space-6: 32px;
  --spp-space-7: 48px;
  --spp-space-8: 64px;
  --spp-space-9: 96px;
  --spp-space-10: 128px;
  --spp-space-11: 160px;
  --spp-radius-none: 0px;
  --spp-radius-sm: 4px;
  --spp-radius-md: 6px;
  --spp-radius-lg: 10px;
  --spp-radius-pill: 999px;
  --spp-radius-card: 4px;
  --spp-border-width: 1px;
  --spp-border-thick: 2px;
  --spp-shadow-none: none;
  --spp-shadow-elevated: 0 1px 2px rgba(0,0,0,.08);
  --spp-shadow-overlay: 0 24px 48px rgba(0,0,0,.24);
  --spp-z-base: 0;
  --spp-z-sticky: 10;
  --spp-z-dropdown: 20;
  --spp-z-drawer: 30;
  --spp-z-modal: 40;
  --spp-z-toast: 50;
  --spp-z-kiosk: 60;
  --spp-duration-fast: 120ms;
  --spp-duration-base: 200ms;
  --spp-duration-slow: 320ms;
  --spp-duration-line: 400ms;
  --spp-easing: cubic-bezier(.16,1,.3,1);
  --spp-layout-content: 760px;
  --spp-layout-max: 1280px;
  --spp-layout-wide: 1440px;
  --spp-gutter: 24px;
  --spp-target-min: 44px;
}

/* Thème clair par défaut ; sombre sur [data-theme="dark"] (sections, hero, live) ou préférence système sur la racine. */
:root, [data-theme="light"] {
  --spp-bg: #FFFFFF;
  --spp-bg-elevated: #FFFFFF;
  --spp-bg-muted: #F2F2F2;
  --spp-fg: #0A0A0A;
  --spp-fg-muted: #5E5E5E;
  --spp-border: rgba(10,10,10,.12);
  --spp-accent: #0A0A0A;
  --spp-accent-hover: #262626;
  --spp-accent-fg: #FFFFFF;
  --spp-focus: #0A0A0A;
  --spp-status-success: #0A0A0A;
  --spp-status-warning: #0A0A0A;
  --spp-status-danger: #B8433E;
  --spp-status-info: #0A0A0A;
  --spp-info-soft: #F2F2F2;
  color-scheme: light;
}
[data-theme="dark"], .spp-on-dark {
  --spp-bg: #0A0A0A;
  --spp-bg-elevated: #161616;
  --spp-bg-muted: #161616;
  --spp-fg: #FFFFFF;
  --spp-fg-muted: #A3A3A3;
  --spp-border: rgba(255,255,255,.16);
  --spp-accent: #FFFFFF;
  --spp-accent-hover: #E5E5E5;
  --spp-accent-fg: #0A0A0A;
  --spp-focus: #FFFFFF;
  --spp-status-success: #FFFFFF;
  --spp-status-warning: #FFFFFF;
  --spp-status-danger: #E0625C;
  --spp-status-info: #FFFFFF;
  --spp-info-soft: #161616;
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root { --spp-duration-fast: 0ms; --spp-duration-base: 0ms; --spp-duration-slow: 0ms; --spp-duration-line: 0ms; }
}

@media (max-width: 767px) {
  :root { --spp-gutter: 16px; }
}