/* ============================================
   Fast2 — Design Tokens (IXILA branding)
   Famille visuelle : Saxho.net / IXILA / Fast
   ============================================ */

:root {
    /* ── Colors — warm palette ── */
    --c-primary: #E91E63;
    --c-primary-light: #F06292;
    --c-primary-dark: #C2185B;
    --c-primary-50: #FCE4EC;
    --c-primary-100: #F8BBD0;

    --c-secondary: #1B3A9E;
    --c-secondary-light: #3A7DFF;
    --c-secondary-dark: #122970;

    --c-tertiary: #F5A623;
    --c-tertiary-light: #F7BD5A;

    --c-dark: #0D0D1A;           /* Near-black — hero, footer (comme Saxho) */
    --c-dark-soft: #2D2D3F;
    --c-medium: #4A5568;
    --c-muted: #718096;
    --c-light: #F8F7F4;           /* Warm off-white (comme Saxho) */
    --c-surface: #F0EDE8;         /* Warm cream (comme Saxho) */
    --c-surface-hover: #E8E4DD;
    --c-white: #FFFFFF;
    --c-border: #E2DFD8;          /* Warm border */
    --c-text: #2D2D3F;
    --c-text-light: #6B7280;

    --c-success: #10B981;
    --c-error: #EF4444;
    --c-warning: #F59E0B;
    --c-info: #3B82F6;

    /* Level badges */
    --c-level-debutant: #10B981;
    --c-level-intermediaire: #3B82F6;
    --c-level-avance: #F59E0B;
    --c-level-expert: #EF4444;

    /* ── Typography ── */
    --ff-display: 'Space Grotesk', system-ui, sans-serif;
    --ff-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --ff-mono: 'JetBrains Mono', monospace;

    --fs-hero: clamp(2.5rem, 5vw, 4.5rem);
    --fs-h1: clamp(2rem, 4vw, 3.5rem);
    --fs-h2: clamp(1.5rem, 3vw, 2.25rem);
    --fs-h3: clamp(1.25rem, 2vw, 1.75rem);
    --fs-h4: 1.125rem;
    --fs-body: 1rem;
    --fs-small: 0.875rem;
    --fs-xs: 0.75rem;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    --lh-tight: 1.2;
    --lh-normal: 1.6;
    --lh-relaxed: 1.8;

    --ls-tight: -0.02em;
    --ls-normal: 0;
    --ls-wide: 0.05em;

    /* ── Spacing (8-point grid) ── */
    --sp-2xs: 0.125rem;  /* 2px */
    --sp-xs: 0.25rem;    /* 4px */
    --sp-sm: 0.5rem;     /* 8px */
    --sp-md: 1rem;       /* 16px */
    --sp-lg: 1.5rem;     /* 24px */
    --sp-xl: 2rem;       /* 32px */
    --sp-2xl: 3rem;      /* 48px */
    --sp-3xl: 4rem;      /* 64px */
    --sp-4xl: 6rem;      /* 96px */

    /* Numeric aliases (used by forum, tickets, etc.) */
    --sp-1: 0.25rem;     /* 4px */
    --sp-2: 0.5rem;      /* 8px */
    --sp-3: 0.75rem;     /* 12px */
    --sp-4: 1rem;        /* 16px */
    --sp-5: 1.25rem;     /* 20px */
    --sp-6: 1.5rem;      /* 24px */
    --sp-8: 2rem;        /* 32px */
    --sp-10: 2.5rem;     /* 40px */

    /* Pill radius (shared with Saxho) */
    --radius-pill: 9999px;

    /* ── Border radius ── */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* ── Shadows — warm tones (comme Saxho) ── */
    --shadow-sm: 0 1px 3px rgba(13, 13, 26, 0.06);
    --shadow-md: 0 4px 12px rgba(13, 13, 26, 0.08);
    --shadow-lg: 0 8px 30px rgba(13, 13, 26, 0.12);
    --shadow-xl: 0 16px 50px rgba(13, 13, 26, 0.15);
    --shadow-glow-primary: 0 4px 20px rgba(233, 30, 99, 0.25);
    --shadow-glow-secondary: 0 4px 20px rgba(27, 58, 158, 0.25);

    /* ── Layout ── */
    --container-max: 1200px;
    --container-narrow: 800px;
    --container-wide: 1400px;
    --header-height: 72px;
    --section-padding: var(--sp-4xl) 0;

    /* ── Z-index scale ── */
    --z-behind: -1;
    --z-base: 0;
    --z-above: 10;
    --z-header: 100;
    --z-overlay: 200;
    --z-modal: 300;
    --z-toast: 400;

    /* ── Transitions ── */
    --transition-fast: 150ms ease;
    --transition-normal: 300ms ease;
    --transition-slow: 500ms ease;
    --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Font faces ── */
@font-face {
    font-family: 'Space Grotesk';
    src: url('../fonts/SpaceGrotesk-Variable.woff2') format('woff2-variations');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-Variable.woff2') format('woff2-variations');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/JetBrainsMono-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}