/* ============================================================
   CREANA CLEANING — TOKENS
   Concept : SURFACE.
   Rien n'est décoratif. Chaque valeur est une décision.
   ============================================================ */

:root {
  /* ────────────────────────────────────────────────
     1. COULEUR
     Palette volontairement courte. Si une couleur doit
     être ajoutée, c'est que la composition est en défaut.
     ──────────────────────────────────────────────── */

  /* Fonds */
  --cc-paper: #fdfdfc;        /* blanc légèrement chaud — jamais #fff pur */
  --cc-surface: #f4f4f1;      /* second plan, sections calmes */
  --cc-surface-deep: #edede9; /* rare : contraste de surface sur surface */

  /* Encre */
  --cc-ink: #14161a;          /* titres, texte principal */
  --cc-ink-soft: #63676f;     /* texte secondaire, descriptions */

  /* Filets — l'élément structurel n°1 de la DA */
  --cc-line: #e3e3df;         /* filet standard */
  --cc-line-strong: #cfcfc9;  /* filet de séparation majeure */
  --cc-line-ink: #14161a;     /* filet actif / focus */

  /* Accent Creana — plafonné à 3 % de la surface d'un écran */
  --cc-accent: #0b63c5;
  --cc-accent-deep: #084a95;

  /* Voile clinique — exclusivement secteur Santé */
  --cc-clinical: #eaf0f2;

  /* Inversion — dernière scène et fond sombre */
  --cc-ink-bg: #101216;
  --cc-paper-on-ink: #f6f6f4;
  --cc-soft-on-ink: rgba(246, 246, 244, 0.56);
  --cc-line-on-ink: rgba(246, 246, 244, 0.16);

  /* Sélection */
  --cc-selection-bg: #14161a;
  --cc-selection-fg: #fdfdfc;

  /* ────────────────────────────────────────────────
     2. TYPOGRAPHIE
     Display = Instrument Serif. Texte = Switzer.
     Aucune autre famille. Aucune autre graisse.
     ──────────────────────────────────────────────── */

  --cc-font-display: "Instrument Serif", "Instrument Fallback", Times, serif;
  --cc-font-text: "Switzer", "Switzer Fallback", "Helvetica Neue", Arial, sans-serif;

  /* Échelle display — fluide, calée sur la largeur du viewport.
     Formule affine (vw + rem) plutôt que vw seul : le plancher
     n'écrase plus les petits écrans et la montée reste linéaire. */
  --cc-size-hero: clamp(2.75rem, 6.2vw + 1.2rem, 7rem);
  --cc-size-d1: clamp(2.25rem, 4.4vw + 0.9rem, 4.75rem);
  --cc-size-d2: clamp(1.875rem, 3.2vw + 0.75rem, 3.5rem);
  --cc-size-d3: clamp(1.5rem, 1.5vw + 0.7rem, 2.375rem);

  /* Échelle texte — pas de fluide, la lisibilité prime */
  --cc-size-lead: 1.1875rem;   /* chapô sous un display */
  --cc-size-body: 1.0625rem;   /* corps de référence */
  --cc-size-small: 0.9375rem;  /* mentions, légendes */
  --cc-size-label: 0.6875rem;  /* eyebrow, uppercase */

  /* Chiffres — timeline, index de section */
  --cc-size-numeral: clamp(3rem, 6.5vw + 0.8rem, 9rem);
  --cc-size-index: 0.75rem;

  /* Interlignage */
  --cc-lh-hero: 0.95;
  --cc-lh-display: 1.02;
  --cc-lh-title: 1.12;
  --cc-lh-body: 1.65;
  --cc-lh-lead: 1.55;

  /* Approche (tracking) */
  --cc-track-hero: -0.02em;
  --cc-track-display: -0.015em;
  --cc-track-text: -0.008em;
  --cc-track-label: 0.14em;

  /* Mesure — jamais dépassée sur du texte courant */
  --cc-measure: 58ch;
  --cc-measure-lead: 46ch;

  /* ────────────────────────────────────────────────
     3. ESPACEMENT — base 8, aucune valeur hors échelle
     ──────────────────────────────────────────────── */

  --cc-s1: 0.25rem;   /*   4 */
  --cc-s2: 0.5rem;    /*   8 */
  --cc-s3: 0.75rem;   /*  12 */
  --cc-s4: 1rem;      /*  16 */
  --cc-s5: 1.5rem;    /*  24 */
  --cc-s6: 2rem;      /*  32 */
  --cc-s7: 3rem;      /*  48 */
  --cc-s8: 4rem;      /*  64 */
  --cc-s9: 6rem;      /*  96 */
  --cc-s10: 8rem;     /* 128 */
  --cc-s11: 12rem;    /* 192 */
  --cc-s12: 16rem;    /* 256 */

  /* Respiration verticale des scènes.
     Le vide est un composant : il a ses propres tokens.
     La courbe est affine : ~56 px à 375, ~158 px à 1440.
     Le mobile respire sans devenir une suite de pages blanches. */
  --cc-scene-pad: clamp(3.5rem, 9.6vw + 1.25rem, 11rem);
  --cc-scene-pad-tight: clamp(2.75rem, 5.4vw + 1rem, 6.5rem);
  --cc-scene-pad-vast: clamp(5rem, 15.5vw + 1.5rem, 18rem); /* sections silencieuses */

  /* ────────────────────────────────────────────────
     4. GRILLE
     12 colonnes. Marge en vw pour que la page respire
     avec l'écran, pas contre lui.
     ──────────────────────────────────────────────── */

  --cc-grid-cols: 12;
  --cc-gutter: 1.5rem;          /* 24 */
  --cc-margin: clamp(1.25rem, 5vw, 5rem);
  --cc-max: 1440px;
  --cc-max-narrow: 880px;

  /* ────────────────────────────────────────────────
     5. FILETS & FORMES
     Radius quasi nul : la netteté est le sujet.
     ──────────────────────────────────────────────── */

  --cc-hairline: 1px;
  --cc-radius: 2px;
  --cc-radius-media: 0px;

  /* ────────────────────────────────────────────────
     6. MOTION
     Peu d'animations différentes, beaucoup de continuité.
     Toute durée hors de cette liste est une erreur.
     ──────────────────────────────────────────────── */

  /* Glisse et s'arrête net — décélération franche, zéro rebond */
  --cc-ease-clean: cubic-bezier(0.22, 0.61, 0.36, 1);
  /* Balayages de masque — accélère puis décélère symétriquement */
  --cc-ease-mask: cubic-bezier(0.65, 0, 0.35, 1);
  /* Micro-interactions — quasi linéaire, imperceptible */
  --cc-ease-micro: cubic-bezier(0.4, 0, 0.2, 1);

  --cc-dur-micro: 160ms;
  --cc-dur-base: 420ms;
  --cc-dur-reveal: 700ms;
  --cc-dur-mask: 900ms;
  --cc-dur-page: 320ms;

  /* Amplitudes maximales. Au-delà, le mouvement se voit. */
  --cc-shift: 16px;       /* translation de révélation */
  --cc-shift-micro: 4px;  /* flèches, liens */
  --cc-scale-media: 1.03; /* échelle d'entrée d'une image */
  --cc-magnet: 6px;       /* magnétisme desktop */

  /* Décalage en cascade — un seul pas, jamais de delay-1/2/3 arbitraire */
  --cc-stagger: 70ms;

  /* ────────────────────────────────────────────────
     7. PHOTOGRAPHIE
     Traitement unique appliqué à toutes les images.
     Aucune image n'est floutée ni assombrie.
     ──────────────────────────────────────────────── */

  --cc-photo-filter: saturate(0.92) contrast(1.02) brightness(1.03);
  --cc-photo-veil: rgba(253, 253, 252, 0.9); /* voile de Clean Reveal */
  --cc-ratio-portrait: 3 / 4;
  --cc-ratio-editorial: 4 / 5;
  --cc-ratio-landscape: 16 / 10;
  --cc-ratio-panorama: 21 / 9;

  /* ────────────────────────────────────────────────
     8. PROFONDEUR
     Pas d'ombre portée dans le système. La hiérarchie
     vient du vide et du filet. Cette variable existe
     uniquement pour les surfaces flottantes (menu mobile).
     ──────────────────────────────────────────────── */

  --cc-z-header: 100;
  --cc-z-overlay: 200;
  --cc-lift: 0 1px 0 var(--cc-line);
}

/* Mobile : le vide coûte cher sur petit écran, on resserre l'échelle
   sans jamais casser le rythme de 8. */
@media (max-width: 640px) {
  :root {
    --cc-gutter: 1rem;
    --cc-size-lead: 1.0625rem;
    --cc-lh-hero: 1;
    --cc-shift: 12px;
    --cc-dur-mask: 560ms;
    --cc-dur-reveal: 520ms;
  }
}