/* ============================================
   DESIGN TOKENS — Agence Ping Pong
   Charte "Le Ping Pong Infini"
   ============================================ */

@font-face {
    font-family: 'Clash Display';
    src: url('../fonts/ClashDisplay-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Clash Display';
    src: url('../fonts/ClashDisplay-Variable.woff2') format('woff2');
    font-weight: 100 700;
    font-display: swap;
}

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

@font-face {
    font-family: 'ChicagoFLF';
    src: url('../fonts/ChicagoFLF.woff') format('woff');
    font-weight: 500;
    font-display: swap;
}

:root {
    --color-coral: #E63946;
    --color-turquoise: #2ABFBF;
    --color-navy: #1B2A4A;
    --color-cream: #F5F0EB;
    --color-white: #FFFFFF;
    --color-turquoise-light: #E8F8F8;

    --font-display: 'Clash Display', 'Arial Black', sans-serif;
    --font-body: 'Space Grotesk', 'Arial', sans-serif;

    --text-hero: clamp(4rem, 10vw, 10rem);
    --text-h1: clamp(2.5rem, 5vw, 5rem);
    --text-h2: clamp(1.5rem, 3vw, 2.5rem);
    --text-body: clamp(1rem, 1.2vw, 1.25rem);
    --text-small: 0.875rem;

    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 4rem;
    --space-xl: 8rem;

    --container-max: 1200px;
    --container-padding: 2rem;

    --z-ball: 9999;
    --z-header: 100;
    --z-menu: 200;

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast: 150ms;
    --duration-normal: 300ms;
    --duration-slow: 500ms;

    --ball-size: 24px;
    --ball-color: var(--color-white);
    --trajectory-color: var(--color-coral);
    --trajectory-dash: 8 12;
}