/*
 * BiMP Éducation — socle des pages publiques
 *
 * Ce fichier ne contient que des fondations partagées : tokens, typographies,
 * focus et quelques utilitaires d'accessibilité. Les composants restent dans
 * la feuille propre à chaque page afin d'éviter les collisions entre guides.
 */

:root {
    color-scheme: light;

    /* Marque */
    --bimp-brand-orange: #f47920;
    --bimp-brand-orange-hover: #d95a0e;
    --bimp-brand-orange-highlight: #fb9a55;
    --bimp-brand-orange-soft: #fff0e7;
    --bimp-brand-orange-ink: #c2510b;
    --bimp-brand-orange-ink-strong: #a63f07;
    --bimp-brand-orange-border: rgba(244, 121, 32, 0.26);
    --bimp-brand-slate: #0f172a;
    --bimp-brand-slate-soft: #1e293b;

    /* Surfaces et texte */
    --bimp-page-bg: #f8f9fa;
    --bimp-page-bg-alt: #f1f5f9;
    --bimp-surface: #ffffff;
    --bimp-surface-raised: rgba(255, 255, 255, 0.88);
    --bimp-surface-soft: #f8fafc;
    --bimp-text: #0f172a;
    --bimp-text-muted: #526075;
    --bimp-text-soft: #6b778c;
    --bimp-text-inverse: #ffffff;
    --bimp-border: rgba(15, 23, 42, 0.11);
    --bimp-border-strong: rgba(15, 23, 42, 0.18);

    /* Couleurs de catégories : réservées aux accents locaux */
    --bimp-soft-peach: #ffdbcb;
    --bimp-soft-peach-ink: #9a3f0b;
    --bimp-soft-blue: #dae2fd;
    --bimp-soft-blue-ink: #284f9e;
    --bimp-soft-teal: #dceceb;
    --bimp-soft-teal-ink: #23645f;
    --bimp-soft-purple: #ece7f8;
    --bimp-soft-purple-ink: #60478f;
    --bimp-success-soft: #e5f5ed;
    --bimp-success: #176b45;
    --bimp-danger-soft: #feebed;
    --bimp-danger: #a6283d;

    /* Typographie */
    --bimp-font-body: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --bimp-font-heading: "Plus Jakarta Sans", "Inter", ui-sans-serif, system-ui, sans-serif;

    /* Géométrie */
    --bimp-container: 1280px;
    --bimp-gutter: clamp(1rem, 3vw, 2rem);
    --bimp-radius-sm: 12px;
    --bimp-radius-md: 18px;
    --bimp-radius-lg: 24px;
    --bimp-radius-xl: 32px;
    --bimp-radius-pill: 999px;

    /* Élévation et mouvement */
    --bimp-shadow-sm: 0 8px 24px rgba(15, 23, 42, 0.055);
    --bimp-shadow-md: 0 18px 48px rgba(15, 23, 42, 0.085);
    --bimp-shadow-lg: 0 28px 72px rgba(15, 23, 42, 0.13);
    --bimp-focus: rgba(244, 121, 32, 0.34);
    --bimp-motion-fast: 140ms ease;
    --bimp-motion-base: 180ms ease;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --bimp-brand-orange: #f47920;
    --bimp-brand-orange-hover: #ff9d65;
    --bimp-brand-orange-highlight: #ffb07a;
    --bimp-brand-orange-soft: rgba(244, 121, 32, 0.16);
    --bimp-brand-orange-ink: #ff9a55;
    --bimp-brand-orange-ink-strong: #ffb07a;
    --bimp-brand-orange-border: rgba(244, 121, 32, 0.32);
    --bimp-brand-slate: #f8fafc;
    --bimp-brand-slate-soft: #e2e8f0;

    --bimp-page-bg: #0f172a;
    --bimp-page-bg-alt: #111c31;
    --bimp-surface: #172033;
    --bimp-surface-raised: rgba(23, 32, 51, 0.9);
    --bimp-surface-soft: #1c2940;
    --bimp-text: #f8fafc;
    --bimp-text-muted: #bdc8d8;
    --bimp-text-soft: #9daac0;
    --bimp-text-inverse: #0f172a;
    --bimp-border: rgba(203, 213, 225, 0.15);
    --bimp-border-strong: rgba(203, 213, 225, 0.24);

    --bimp-soft-peach: rgba(244, 121, 32, 0.2);
    --bimp-soft-peach-ink: #ffc39f;
    --bimp-soft-blue: rgba(96, 135, 220, 0.22);
    --bimp-soft-blue-ink: #bdd0ff;
    --bimp-soft-teal: rgba(63, 139, 131, 0.22);
    --bimp-soft-teal-ink: #a9ded8;
    --bimp-soft-purple: rgba(129, 101, 181, 0.23);
    --bimp-soft-purple-ink: #d8c5ff;
    --bimp-success-soft: rgba(41, 151, 99, 0.2);
    --bimp-success: #9ee3bf;
    --bimp-danger-soft: rgba(210, 65, 87, 0.2);
    --bimp-danger: #ffb4c0;

    --bimp-shadow-sm: 0 8px 26px rgba(2, 6, 23, 0.22);
    --bimp-shadow-md: 0 20px 52px rgba(2, 6, 23, 0.34);
    --bimp-shadow-lg: 0 32px 80px rgba(2, 6, 23, 0.46);
    --bimp-focus: rgba(255, 138, 69, 0.42);
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 6.5rem;
}

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

body {
    min-height: 100vh;
    font-family: var(--bimp-font-body);
    background: var(--bimp-page-bg);
    color: var(--bimp-text);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--bimp-font-heading);
    letter-spacing: -0.025em;
    text-wrap: balance;
}

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

a,
button,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--bimp-focus);
    outline-offset: 3px;
}

.skip-link {
    position: fixed;
    z-index: 2000;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.7rem 1rem;
    border-radius: var(--bimp-radius-sm);
    background: var(--bimp-brand-slate);
    color: var(--bimp-text-inverse);
    font-weight: 700;
    transform: translateY(calc(-100% - 1rem));
    transition: transform var(--bimp-motion-fast);
}

.skip-link:focus {
    transform: translateY(0);
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}