/**
 * Design tokens & base styles - API Statut FFVélo
 * Modern CSS: cascade layers, logical properties, oklch derivations, fluid typography.
 */

@layer fonts, reset, tokens, base, components, page;

/* ---------- Self-hosted fonts (latin subset, woff2) ---------- */

@layer fonts {
    @font-face {
        font-family: "Jost";
        font-style: normal;
        font-weight: 300;
        font-display: swap;
        src: url("/fonts/jost-300.woff2") format("woff2");
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
            U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
            U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    @font-face {
        font-family: "Jost";
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url("/fonts/jost-400.woff2") format("woff2");
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
            U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
            U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    @font-face {
        font-family: "Jost";
        font-style: normal;
        font-weight: 500;
        font-display: swap;
        src: url("/fonts/jost-500.woff2") format("woff2");
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
            U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
            U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    @font-face {
        font-family: "Jost";
        font-style: normal;
        font-weight: 600;
        font-display: swap;
        src: url("/fonts/jost-600.woff2") format("woff2");
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
            U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
            U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    @font-face {
        font-family: "JetBrains Mono";
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url("/fonts/jetbrains-mono-400.woff2") format("woff2");
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
            U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
            U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    @font-face {
        font-family: "JetBrains Mono";
        font-style: normal;
        font-weight: 500;
        font-display: swap;
        src: url("/fonts/jetbrains-mono-500.woff2") format("woff2");
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
            U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
            U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
}

@layer reset {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    * {
        margin: 0;
        padding: 0;
    }

    body {
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }

    img,
    svg {
        display: block;
        max-inline-size: 100%;
    }

    button,
    input,
    select,
    textarea {
        font: inherit;
        color: inherit;
    }

    button {
        cursor: pointer;
        background: none;
        border: none;
    }

    a {
        color: inherit;
    }

    table {
        border-collapse: collapse;
    }
}

@layer tokens {
    :root {
        color-scheme: light;

        /* FFVélo brand colors (charte fédérale - hex officiels préservés) */
        --color-blue: #172983;
        --color-blue-mid: #4a60c8;
        --color-blue-light: #e8ecf8;
        --color-red: #e2001a;
        --color-red-light: #fce8ea;

        /* Surfaces */
        --surface-bg: #f7f8fc;
        --surface-card: #fff;
        --surface-code: #1a1d2e;

        /* Text */
        --text-base: #1a1d2e;
        --text-muted: #5a6080;
        --text-on-blue: #fff;

        /* Borders */
        --border-base: #e2e5ef;

        /* Typography */
        --font-sans: "Jost", system-ui, -apple-system, sans-serif;
        --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", monospace;

        /* Fluid type scale (clamp pour responsive sans media query) */
        --fs-xs: clamp(0.625rem, 0.55rem + 0.2vw, 0.75rem);
        --fs-sm: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);
        --fs-base: clamp(0.875rem, 0.85rem + 0.15vw, 1rem);
        --fs-md: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
        --fs-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
        --fs-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.625rem);

        /* Spacing scale */
        --space-2xs: 0.25rem;
        --space-xs: 0.375rem;
        --space-sm: 0.5rem;
        --space-md: 0.875rem;
        --space-lg: 1.25rem;
        --space-xl: 2rem;
        --space-2xl: 3rem;

        /* Radii */
        --radius-sm: 4px;
        --radius-md: 8px;
        --radius-lg: 12px;

        /* Shadows */
        --shadow-card: 0 4px 20px color-mix(in oklab, var(--color-blue), transparent 94%);

        /* Easing & motion */
        --ease-quick: cubic-bezier(0.4, 0, 0.2, 1);
        --duration-quick: 150ms;
    }
}

@layer base {
    body {
        font-family: var(--font-sans);
        color: var(--text-base);
        background: var(--surface-bg);
        font-size: var(--fs-base);
        line-height: 1.6;
        min-block-size: 100dvh;
    }

    code {
        font-family: var(--font-mono);
        font-size: 0.92em;
        background: color-mix(in oklab, var(--color-blue), transparent 94%);
        padding-block: 1px;
        padding-inline: 5px;
        border-radius: 3px;
        color: var(--color-blue);
    }

    :focus-visible {
        outline: 2px solid var(--color-blue);
        outline-offset: 2px;
    }

    @media (prefers-reduced-motion: no-preference) {
        html {
            scroll-behavior: smooth;
        }
    }
}