@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&family=Roboto:wght@400;500&display=swap');

/* Shared design tokens.
   Keep legacy names available while the migration is in progress. */
:root {
    --vert-base: #f0f7f0;
    --vert-secondaire: #e1f0e1;
    --vert-accent: #00bfa5;
    --vert-accent-hover: #008c7a;
    --vert-fonce: #00695c;
    --vert-tres-clair: #e0f2f1;

    --texte-sombre: #263238;
    --texte-secondaire: #546e7a;
    --texte-discret: #78909c;
    --texte-clair: #ffffff;
    --texte-sur-vert-structure: #f5f5f5;

    --fond-clair: #ffffff;
    --fond-gris: #f4f6f8;
    --bordure-input: #b0bec5;
    --bordure-discret: #eceff1;

    --ombre-couleur: rgba(38, 50, 56, 0.1);
    --ombre-couleur-intense: rgba(38, 50, 56, 0.2);

    --layout-max-width: 1140px;
    --layout-horizontal-gutter: clamp(1rem, 6vw, 3rem);

    --couleur-succes-texte: #1b5e20;
    --couleur-succes-fond: #e8f5e9;
    --couleur-succes-bordure: #a5d6a7;
    --couleur-erreur-texte: #b71c1c;
    --couleur-erreur-fond: #ffebee;
    --couleur-erreur-bordure: #ef9a9a;
    --couleur-avertissement-texte: #e65100;
    --couleur-avertissement-fond: #fff3e0;
    --couleur-avertissement-bordure: #ffcc80;
    --couleur-info-texte: #01579b;
    --couleur-info-fond: #e1f5fe;
    --couleur-info-bordure: #81d4fa;
    --couleur-danger-fond: #d32f2f;
    --couleur-danger-fond-hover: #b71c1c;
    --couleur-danger-texte: var(--texte-clair);

    --vert-accent-transparent: rgba(0, 191, 165, 0.15);
    --vert-clair-transparent: rgba(224, 242, 241, 0.7);
    --gris-moyen-transparent: rgba(245, 245, 245, 0.8);
    --vert-structure-fond: #3a7d44;

    --font-principale: 'Roboto', Arial, sans-serif;
    --font-titres: 'Montserrat', Arial, sans-serif;
    --font-display: 'Montserrat', Arial, sans-serif;

    --spacing-xxs: 0.25rem;
    --spacing-xs: 0.5rem;
    --spacing-sm: 0.75rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2.5rem;
    --spacing-xxl: 4rem;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-round: 50px;

    --shadow-xs: 0 1px 2px 0 var(--ombre-couleur);
    --shadow-sm: 0 2px 4px 0 var(--ombre-couleur);
    --shadow-md: 0 4px 8px -2px var(--ombre-couleur), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 10px 15px -3px var(--ombre-couleur-intense), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px var(--ombre-couleur-intense), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    --brand-950: #102a24;
    --brand-900: #15382f;
    --brand-800: #1c4b3f;
    --brand-700: #246352;
    --brand-600: #2f836c;
    --brand-500: #2fa57f;
    --brand-300: #d9f0e5;
    --brand-200: #ebf7f1;
    --brand-100: #f6fbf8;
    --sand-100: #f5f1e8;
    --text-950: #16322c;
    --text-800: #31534b;
    --text-700: #516d66;
    --text-600: #637b74;
    --text-500: #779089;
    --border-strong: rgba(21, 56, 47, 0.16);
    --border-soft: rgba(21, 56, 47, 0.08);
    --shadow-soft: 0 12px 36px rgba(17, 37, 31, 0.08);
    --shadow-panel: 0 18px 48px rgba(17, 37, 31, 0.12);

    --breakpoint-sm: 600px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
}