/* =====================================================================
   tokens.css — SOURCE UNIQUE du design de 1asso1site (store)
   Modifier une valeur ici = tout le site suit.
   Aucun composant ne doit hardcoder des valeurs — il consomme ces tokens.
   Heritage direct du design de Servir et Unir, avec une palette adaptee
   au positionnement produit (un peu plus tech, sans le rouge typique S&U).
   ===================================================================== */

:root {
  /* --------------------- Palette brute ------------------------- */
  /* Bleu sobre, vert sourd (accent secondaire), ivoire doux. */
  --c-bleu-900: #0f2550;
  --c-bleu-700: #1e3a6f;       /* accent principal — meme que S&U pour cohesion */
  --c-bleu-500: #3b5998;
  --c-bleu-200: #cfd9ec;
  --c-bleu-050: #eef2f8;

  /* Accent secondaire : vert sourd (= sobriete, ecologie) au lieu du rouge S&U */
  --c-accent2-900: #1e4536;
  --c-accent2-700: #2f6b4a;    /* accent secondaire */
  --c-accent2-500: #4f8c6e;
  --c-accent2-200: #c8dcd0;
  --c-accent2-050: #eef5f1;

  --c-ivoire: #fbfaf6;         /* fond principal */
  --c-creme: #f4f0e6;
  --c-blanc: #ffffff;

  --c-encre-900: #151519;
  --c-encre-700: #2a2a32;      /* texte principal */
  --c-encre-500: #52525c;
  --c-gris-500: #6b6b75;
  --c-gris-300: #b7b7bf;
  --c-gris-200: #d9d9df;
  --c-gris-100: #ececef;

  /* --------------------- Semantics ----------------------------- */
  --bg: var(--c-ivoire);
  --bg-surface: var(--c-blanc);
  --bg-subtle: var(--c-creme);
  --fg: var(--c-encre-700);
  --fg-strong: var(--c-encre-900);
  --fg-muted: var(--c-gris-500);
  --accent: var(--c-bleu-700);
  --accent-strong: var(--c-bleu-900);
  --accent-soft: var(--c-bleu-050);
  --accent-alt: var(--c-accent2-700);
  --accent-alt-soft: var(--c-accent2-050);
  --border: rgba(21, 21, 25, 0.10);
  --border-strong: rgba(21, 21, 25, 0.18);
  --link: var(--c-bleu-700);
  --link-hover: var(--c-accent2-700);
  --danger: #8b2e2e;
  --success: var(--c-accent2-700);

  /* --------------------- Typographie --------------------------- */
  --font-serif: ui-serif, "Iowan Old Style", "Apple Garamond", "Palatino Linotype", Georgia, Cambria, "Times New Roman", Times, serif;
  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  --fs-xs: 0.8rem;
  --fs-sm: 0.9rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: 3rem;
  --fs-4xl: 4rem;

  --lh-tight: 1.15;
  --lh-normal: 1.55;
  --lh-relaxed: 1.75;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --ls-tight: -0.015em;
  --ls-normal: 0;
  --ls-wide: 0.04em;
  --ls-caps: 0.12em;

  /* --------------------- Espacements --------------------------- */
  --sp-0: 0;
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* --------------------- Rayons et ombres ---------------------- */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(15, 37, 80, 0.05);
  --shadow-md: 0 2px 6px rgba(15, 37, 80, 0.06), 0 8px 20px rgba(15, 37, 80, 0.04);
  --shadow-lg: 0 4px 16px rgba(15, 37, 80, 0.08), 0 20px 40px rgba(15, 37, 80, 0.06);

  /* --------------------- Transitions --------------------------- */
  --t-fast: 120ms ease;
  --t-med: 220ms ease;
  --t-slow: 420ms cubic-bezier(0.2, 0.6, 0.2, 1);

  /* --------------------- Layout -------------------------------- */
  --container-max: 1180px;
  --container-narrow: 760px;
  --container-wide: 1380px;
  --gutter: var(--sp-5);
  --header-h: 76px;

  /* --------------------- Mesh / fusion background -------------- */
  /* Style store : pas de mesh tricolore (trop typé S&U). On garde une
     declaration pour compat avec components.css mais l'opacite est faible. */
  --mesh-opacity: 0.4;
  --mesh-intensity: 0.25;
  --mesh-bleu: var(--c-bleu-700);
  --mesh-rouge: var(--c-accent2-700);
  --mesh-ivoire: var(--c-ivoire);
  --mesh-creme: var(--c-creme);
}

/* Petit raccourci dark-friendly plus tard : il suffira de redeclarer quelques
   semantics dans [data-theme="dark"] { ... } sans toucher aux composants. */