/**
 * SurLeFoot Design System — primitive tokens.
 * These values describe the raw visual language. Components consume the
 * semantic aliases declared in design-system.css.
 */

:root {
    /* Brand palette */
    --slf-navy-950: #071525;
    --slf-navy-900: #0b1f35;
    --slf-navy-800: #132b45;
    --slf-navy-700: #1b3a59;
    --slf-green-700: #15933f;
    --slf-green-600: #24a94b;
    --slf-green-500: #2ecc71;
    --slf-green-100: #dcf7e5;
    --slf-orange-600: #d85f0d;
    --slf-orange-500: #f97316;

    /* Neutral palette */
    --slf-neutral-950: #17202a;
    --slf-neutral-800: #34404c;
    --slf-neutral-700: #4d5965;
    --slf-neutral-600: #68717b;
    --slf-neutral-400: #a6afb8;
    --slf-neutral-300: #cbd2d9;
    --slf-neutral-200: #e2e7ec;
    --slf-neutral-100: #f4f6f8;
    --slf-neutral-50: #f8fafb;
    --slf-white: #ffffff;

    /* Feedback palette */
    --slf-red-700: #b62f2f;
    --slf-red-500: #e04747;
    --slf-amber-700: #a85e00;
    --slf-amber-500: #e99016;
    --slf-blue-700: #1d5f9f;
    --slf-blue-500: #2778c7;

    /* Competition palette */
    --slf-ligue-1: #20a957;
    --slf-ligue-2: #2684d9;
    --slf-national: #e58a20;
    --slf-coupe-france: #d94747;
    --slf-feminin: #8b5bd6;
    --slf-equipe-france: #2156a5;

    /* Typography */
    --slf-font-family-display: "Montserrat", Arial, sans-serif;
    --slf-font-family-body: "Inter", Arial, sans-serif;
    --slf-font-size-100: 0.75rem;
    --slf-font-size-200: 0.875rem;
    --slf-font-size-300: 1rem;
    --slf-font-size-400: 1.125rem;
    --slf-font-size-500: 1.25rem;
    --slf-font-size-600: 1.5rem;
    --slf-font-size-700: 2rem;
    --slf-font-size-800: 2.5rem;
    --slf-line-height-tight: 1.15;
    --slf-line-height-heading: 1.25;
    --slf-line-height-body: 1.6;
    --slf-font-weight-regular: 400;
    --slf-font-weight-medium: 600;
    --slf-font-weight-bold: 700;
    --slf-font-weight-black: 900;

    /* Spacing — fixed 4px base scale */
    --slf-space-0: 0;
    --slf-space-1: 4px;
    --slf-space-2: 8px;
    --slf-space-3: 12px;
    --slf-space-4: 16px;
    --slf-space-5: 24px;
    --slf-space-6: 32px;
    --slf-space-7: 48px;
    --slf-space-8: 64px;
    --slf-space-9: 80px;

    /* Shape */
    --slf-radius-1: 6px;
    --slf-radius-2: 10px;
    --slf-radius-3: 14px;
    --slf-radius-4: 18px;
    --slf-radius-pill: 999px;

    /* Elevation */
    --slf-shadow-1: 0 4px 14px rgba(7, 21, 37, 0.07);
    --slf-shadow-2: 0 10px 30px rgba(7, 21, 37, 0.11);
    --slf-shadow-3: 0 24px 60px rgba(7, 21, 37, 0.16);

    /* Motion */
    --slf-duration-fast: 180ms;
    --slf-duration-base: 280ms;
    --slf-easing-standard: ease;

    /* Layout */
    --slf-container-content: 1180px;
    --slf-container-wide: 1240px;
}