/* ===================================================================
   DON BOSCO NICE — DESIGN TOKENS
   Centralise toutes les variables CSS du design system.
   À porter tel quel en stack PHP/CSS vanilla.
   =================================================================== */

:root {
  /* -------- COULEURS -------- */
  /* Famille ocre / or — couleur principale, CTA, accents */
  --color-ochre:        #C68A3A;   /* Ocre doré — primaire */
  --color-ochre-deep:   #A36A22;   /* Hover, focus, pressé */
  --color-ochre-light:  #E8C88A;   /* Highlight, fond clair */
  --color-ochre-soft:   #F4E3C2;   /* Fond très clair */

  /* Famille brun — texte, footer */
  --color-brown:        #3D2B1F;   /* Texte principal, footer */
  --color-brown-soft:   #6B5443;   /* Texte secondaire */
  --color-brown-mute:   #9B8470;   /* Texte tertiaire, métadonnées */

  /* Famille crème / ivoire — surfaces */
  --color-cream:        #FBF5E9;   /* Surface principale */
  --color-cream-warm:   #F5EBD6;   /* Surface alternée */
  --color-ivory:        #FEFCF5;   /* Cartes, sur-surface */
  --color-white:        #FFFFFF;

  /* Accents secondaires (pour les badges filière uniquement) */
  --color-accent-college:    #4F8B5A;  /* Vert sauge — collège */
  --color-accent-lyceegt:    #8C6E3F;  /* Bronze — lycée GT */
  --color-accent-lyceepro:   #C68A3A;  /* Ocre — lycée pro */
  --color-accent-cfa:        #B8743A;  /* Terre cuite — CFA */
  --color-accent-sport:      #B85A4A;  /* Brique — sport-études */
  --color-accent-international: #5C7A8C; /* Ardoise — international */

  /* États */
  --color-success: #4F8B5A;
  --color-warning: #C68A3A;
  --color-error:   #B85A4A;

  /* Bordures */
  --border-default:  rgba(61, 43, 31, 0.12);
  --border-strong:   rgba(61, 43, 31, 0.22);
  --border-ochre:    rgba(198, 138, 58, 0.35);

  /* Alias de compatibilité : composants stylés avant la refonte ochre/brown
     (forms, cookie-banner, admin-*, .page-legal) référencent encore ces noms. */
  --color-accent:     var(--color-ochre);
  --color-brown-deep: var(--color-brown);
  --color-border:     var(--border-default);

  /* -------- TYPOGRAPHIE -------- */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Tailles fluides — mobile → desktop */
  --fs-xs:    0.75rem;   /* 12px — métadonnées */
  --fs-sm:    0.875rem;  /* 14px — petit corps */
  --fs-base:  1rem;      /* 16px — corps */
  --fs-md:    1.125rem;  /* 18px — corps mis en avant */
  --fs-lg:    1.375rem;  /* 22px — sous-titre */
  --fs-xl:    1.75rem;   /* 28px — H3 */
  --fs-2xl:   2.25rem;   /* 36px — H2 */
  --fs-3xl:   3rem;      /* 48px — H1 secondaire */
  --fs-4xl:   clamp(2.5rem, 5vw + 1rem, 4.5rem);   /* H1 hero */
  --fs-display: clamp(4rem, 9vw, 8rem);            /* numérique éditorial */

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-wider:  0.18em;

  /* -------- ESPACEMENTS — échelle 4px -------- */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.5rem;    /* 24px */
  --space-6:  2rem;      /* 32px */
  --space-7:  3rem;      /* 48px */
  --space-8:  4rem;      /* 64px */
  --space-9:  6rem;      /* 96px */
  --space-10: 8rem;      /* 128px */

  /* -------- RADIUS -------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* -------- OMBRES -------- */
  --shadow-xs: 0 1px 2px rgba(61, 43, 31, 0.05);
  --shadow-sm: 0 2px 8px rgba(61, 43, 31, 0.06);
  --shadow-md: 0 6px 20px rgba(61, 43, 31, 0.08);
  --shadow-lg: 0 16px 40px rgba(61, 43, 31, 0.12);
  --shadow-xl: 0 24px 60px rgba(61, 43, 31, 0.18);
  --shadow-focus: 0 0 0 3px rgba(198, 138, 58, 0.4);

  /* -------- LAYOUT -------- */
  --container-max:   1280px;
  --container-pad:   clamp(1rem, 4vw, 2rem);
  --section-pad-y:   clamp(3.5rem, 8vw, 6rem);

  /* -------- TRANSITIONS -------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 150ms var(--ease-out);
  --t-base: 280ms var(--ease-out);
  --t-slow: 500ms var(--ease-out);

  /* -------- Z-INDEX -------- */
  --z-base:    1;
  --z-sticky:  100;
  --z-overlay: 500;
  --z-modal:   800;
  --z-toast:   1000;
}

/* Préférences accessibilité */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}