/* ==========================================================================
   Salty Vision — Phase 1 — Jetons de design (maquettes)
   SAL-159 / parent SAL-156 — Direction Créative (Da Vinci Respo 03)

   Portée : jetons partagés par les trois sites + 3 thèmes de marque.
   Les valeurs marquées PROVISOIRE sont des propositions de travail en attente
   de l'identité visuelle d'Éphémère. Elles sont regroupées ici pour qu'une
   seule substitution suffise (aucun accent codé en dur ailleurs).
   ========================================================================== */

:root {
  /* --- Typographie : system-first ------------------------------------- */
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
    Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
    Inter, Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Échelle typographique — hiérarchie par taille et graisse, pas par couleur */
  --t-caption2: 0.6875rem;  /* 11px — mentions légales, méta */
  --t-caption: 0.75rem;     /* 12px */
  --t-footnote: 0.8125rem;  /* 13px */
  --t-subhead: 0.9375rem;   /* 15px */
  --t-body: 1.0625rem;      /* 17px — corps de référence iOS */
  --t-callout: 1.1875rem;   /* 19px */
  --t-title3: 1.375rem;     /* 22px */
  --t-title2: 1.75rem;      /* 28px */
  --t-title1: 2.125rem;     /* 34px */
  --t-large: 2.75rem;       /* 44px */
  --t-hero: 3.5rem;         /* 56px — desktop seulement */

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

  --lh-tight: 1.1;
  --lh-title: 1.2;
  --lh-body: 1.55;

  --tracking-tight: -0.022em;  /* titres larges */
  --tracking-normal: -0.01em;
  --tracking-eyebrow: 0.06em;  /* sur-titres en capitales */

  /* --- Surfaces et encres (gamme de gris système) ---------------------- */
  --bg: #fbfbfd;             /* off-white de page */
  --bg-elevated: #ffffff;    /* cartes, feuilles, modales */
  --surface-2: #f5f5f7;      /* regroupement secondaire */
  --surface-3: #ededf0;      /* alternance / placeholders */
  --fill-quiet: rgba(120, 120, 128, 0.08);  /* remplissage discret */
  --fill-quiet-strong: rgba(120, 120, 128, 0.14);

  --ink: #1c1c1e;            /* 16.5:1 sur --bg */
  --ink-2: #3a3a3c;          /* 11.0:1 */
  --ink-3: #6e6e73;          /* 4.9:1 — plus petit niveau conforme AA */
  --ink-decor: #8e8e93;      /* 3.2:1 — décoratif / icônes seulement, jamais de texte courant */
  --ink-on-accent: #ffffff;

  /* Filets : présence minimale, jamais de bordure franche */
  --hairline: rgba(60, 60, 67, 0.10);
  --hairline-strong: rgba(60, 60, 67, 0.16);

  /* --- Profondeur : ombres diffuses, aucune ombre dure ----------------- */
  --shadow-quiet: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.05);
  --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.05), 0 16px 40px rgba(0, 0, 0, 0.09);
  --shadow-overlay: 0 -1px 2px rgba(0, 0, 0, 0.04), 0 -24px 64px rgba(0, 0, 0, 0.16);
  --shadow-modal: 0 24px 80px rgba(0, 0, 0, 0.22);

  /* --- Rayons --------------------------------------------------------- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-sheet: 16px;  /* appliqué en haut de la bottom-sheet */
  --r-pill: 999px;

  /* --- Espacement (base 4) -------------------------------------------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-14: 56px; --s-18: 72px; --s-24: 96px;
  --s-32: 128px;

  --gutter: var(--s-5);        /* marge latérale mobile */
  --gutter-lg: var(--s-8);     /* marge latérale desktop */
  --maxw: 1120px;              /* largeur de contenu desktop */
  --maxw-text: 68ch;           /* confort de lecture */

  /* --- Ergonomie tactile ---------------------------------------------- */
  --tap: 44px;                 /* cible minimale 44 × 44 px */
  --nav-h: 56px;               /* hauteur barre mobile */
  --nav-h-lg: 64px;

  /* --- Mouvement : court, mesuré -------------------------------------- */
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-sheet: 320ms;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);      /* sortie iOS */
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Translucidité (amélioration progressive) ------------------------ */
  --veil: rgba(251, 251, 253, 0.72);     /* barres translucides */
  --veil-opaque: #fbfbfd;                /* repli opaque obligatoire */
  --scrim: rgba(28, 28, 30, 0.32);       /* voile d'arrière-plan d'overlay */
  --blur: saturate(180%) blur(20px);

  /* --- Statut (sobre, non décoratif) ---------------------------------- */
  --status-draft-bg: rgba(146, 83, 31, 0.10);
  --status-draft-ink: #7a4418;
  --status-ok-bg: rgba(52, 81, 56, 0.10);
  --status-ok-ink: #2f4a34;

  /* Accent par défaut = neutre. Chaque thème de site le surcharge. */
  --accent: var(--ink);
  --accent-ink: var(--ink);          /* accent lisible en texte (AA) */
  --accent-wash: var(--fill-quiet);  /* aplat très clair */
  --focus: #0b6fb8;                  /* anneau de focus — commun aux 3 sites */
}

/* ==========================================================================
   Thèmes de marque — un attribut data-site sur <html>
   PROVISOIRE : accents en attente d'arbitrage Éphémère.
   Contrastes vérifiés (WCAG 2.1) :
     Salty Vision #2f6f8f : 5,36:1 sur off-white — blanc dessus 5,54:1
       variante texte #2a6480 : 6,28:1
     Colline Boisée #4a6b4f : 5,79:1 — blanc dessus 5,99:1
       variante texte #3d5a42 : 7,42:1
     Malt'Hazard #a8622b : 4,57:1 — blanc dessus 4,72:1
       variante texte #92531f : 5,84:1 (requise sur --surface-2)
   ========================================================================== */

[data-site="saltyvision"] {
  --accent: #2f6f8f;
  --accent-ink: #2a6480;
  --accent-wash: rgba(47, 111, 143, 0.08);
  --bg: #fbfbfd;
  --veil: rgba(251, 251, 253, 0.72);
  --veil-opaque: #fbfbfd;
}

[data-site="colline-boisee"] {
  --accent: #4a6b4f;
  --accent-ink: #3d5a42;
  --accent-wash: rgba(74, 107, 79, 0.08);
  --bg: #fbfbfb;              /* off-white très légèrement chaud */
  --veil: rgba(251, 251, 251, 0.72);
  --veil-opaque: #fbfbfb;
}

[data-site="malt-hazard"] {
  --accent: #a8622b;
  --accent-ink: #92531f;
  --accent-wash: rgba(168, 98, 43, 0.08);
  --bg: #fcfbf9;              /* off-white chaud, reste clair */
  --surface-2: #f6f4f1;
  --veil: rgba(252, 251, 249, 0.74);
  --veil-opaque: #fcfbf9;
}

/* ==========================================================================
   Préférences utilisateur — respectées par les jetons eux-mêmes
   ========================================================================== */

@media (prefers-reduced-transparency: reduce) {
  :root {
    --veil: var(--veil-opaque);
    --blur: none;
    --scrim: rgba(28, 28, 30, 0.44);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur: 1ms;
    --dur-sheet: 1ms;
  }
}

@media (prefers-contrast: more) {
  :root {
    --ink-3: #55555a;
    --hairline: rgba(60, 60, 67, 0.22);
    --hairline-strong: rgba(60, 60, 67, 0.34);
  }
}