/* ==========================================================================
   MÉRA — Design tokens
   Source : Méra_final_bref (palette verrouillée). Aucune autre couleur de marque.
   ========================================================================== */

/*
   Breakpoints (les custom properties ne sont pas utilisables dans @media,
   valeurs à reprendre telles quelles dans responsive.css) :
     mobile        <= 767px   (base, mobile-first)
     tablet        768px  → 1023px
     laptop        1024px → 1439px
     large desktop >= 1440px
*/

:root {
  /* ---- Palette (verrouillée) ---- */
  --color-black: #0C0C0C;
  --color-ivory: #F2EFE8;
  --color-cobalt: #1557FF; /* accent uniquement : actifs, liens clés, CTA, repères */

  /* Filets : dérivés des couleurs de la palette, pas de nouvelle teinte */
  --color-rule-on-light: rgb(12 12 12 / 0.9);
  --color-rule-on-light-soft: rgb(12 12 12 / 0.18);
  --color-rule-on-dark: rgb(242 239 232 / 0.9);
  --color-rule-on-dark-soft: rgb(242 239 232 / 0.22);
  --color-muted-on-light: rgb(12 12 12 / 0.72);
  --color-muted-on-dark: rgb(242 239 232 / 0.72);

  /* ---- Surfaces (valeurs par défaut = surface claire) ---- */
  --surface-bg: var(--color-ivory);
  --surface-fg: var(--color-black);
  --surface-muted: var(--color-muted-on-light);
  --surface-rule: var(--color-rule-on-light);
  --surface-rule-soft: var(--color-rule-on-light-soft);
  --focus-color: var(--color-cobalt);

  /* ---- Typographie : familles (voir typography.css) ---- */
  --font-sans: var(--font-sans-temp);
  --font-serif: var(--font-serif-temp);

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --weight-black: 900;

  /* ---- Échelle typographique (fluide) ---- */
  --text-2xs: 0.6875rem;                                  /* 11px — labels, index */
  --text-xs: 0.75rem;                                     /* 12px — nav, prix, méta */
  --text-sm: 0.875rem;                                    /* 14px */
  --text-base: 1rem;                                      /* 16px — texte courant */
  --text-md: clamp(1.0625rem, 0.98rem + 0.35vw, 1.25rem); /* intros */
  --text-lg: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);      /* titres serif secondaires */
  --text-xl: clamp(2rem, 1.4rem + 2.6vw, 3.75rem);        /* titres de module */
  --text-2xl: clamp(2.75rem, 1.6rem + 5vw, 6rem);         /* titres forts */
  --text-display: clamp(4.5rem, 1rem + 15vw, 17rem);      /* hero : MÉRA, LA CARTE… */

  --leading-display: 0.84;
  --leading-tight: 0.95;
  --leading-snug: 1.2;
  --leading-body: 1.45;

  --tracking-display: -0.02em;
  --tracking-label: 0.08em;
  --tracking-nav: 0.06em;

  /* ---- Espacements (base 4px) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --space-section: clamp(3rem, 2rem + 4vw, 6rem);

  /* ---- Grille ---- */
  --grid-columns: 4;          /* mobile ; 8 en tablet ; 12 à partir du laptop */
  --grid-gutter: 1rem;        /* marge latérale de page */
  --grid-gap: 1rem;           /* gouttière entre colonnes */
  --container-max: 1680px;

  /* ---- Header ---- */
  --header-height: 3.5rem;

  /* ---- Filets & formes ---- */
  --rule-width: 1px;
  --rule-short: 3rem;         /* filet court « — » des maquettes */
  --radius-none: 0;           /* pas de border-radius décoratif */
  --tap-min: 44px;            /* zone tactile minimale */

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 700ms;

  /* ---- Plans ---- */
  --z-header: 100;
  --z-menu: 90;
  --z-skip: 200;
}

/* Surface sombre : à poser sur les modules noirs (footer, édition, etc.) */
.surface-dark {
  --surface-bg: var(--color-black);
  --surface-fg: var(--color-ivory);
  --surface-muted: var(--color-muted-on-dark);
  --surface-rule: var(--color-rule-on-dark);
  --surface-rule-soft: var(--color-rule-on-dark-soft);
  /* le cobalt sur noir est à 3.6:1 → focus ivoire pour garantir la lisibilité */
  --focus-color: var(--color-ivory);
}

.surface-light {
  --surface-bg: var(--color-ivory);
  --surface-fg: var(--color-black);
  --surface-muted: var(--color-muted-on-light);
  --surface-rule: var(--color-rule-on-light);
  --surface-rule-soft: var(--color-rule-on-light-soft);
  --focus-color: var(--color-cobalt);
}