/* Design system v3 -- Clément Cathala (marque perso). Tokens.
   Palette « Stylo bleu », Young Serif + Hanken Grotesk + Shantell Sans, univers « bande de spécifications ».
   Contrastes vérifiés par contrast.mjs (WCAG AA texte >= 4,5). Projet PERSO, cloisonné UH. */
/* Polices chargées par <link> dans le <head> de chaque page (pas d'@import : il retardait le rendu). */

:root {
  /* Couleurs de base */
  --cc-papier: #FAF8F4;      /* fond par défaut */
  --cc-papier-2: #F2EEE6;    /* fond secondaire (bandeaux, zones calmes) */
  --cc-encre: #1E1E1C;       /* texte, filets, boutons primaires */
  --cc-bleu-pale: #BFD0F2;   /* aplat d'illustration, surlignage */
  --cc-jaune: #F3DE7A;       /* aplat d'illustration, très rare en interface */
  --cc-stylo: #2446C8;       /* annotations, exposant du logo, liens. LA signature de couleur */

  /* Texte */
  --cc-texte: var(--cc-encre);
  --cc-texte-2: #56544F;     /* texte secondaire. 4,87 sur bleu pâle, 7,13 sur papier */
  --cc-texte-3: #8A877F;     /* mentions, légendes >= 18 px ou non essentielles (3,38) */
  --cc-desactive: #A9A59C;

  /* États */
  --cc-encre-survol: #3A3935;
  --cc-stylo-survol: #1B379F;
  --cc-stylo-sur-encre: #9DB3F5; /* stylo bleu lisible sur fond encre (8,11) */
  --cc-focus: 0 0 0 2px var(--cc-papier), 0 0 0 4px var(--cc-stylo);

  /* Filets (l'univers « bande de spécifications ») */
  --cc-filet: 1.2px solid var(--cc-encre);
  --cc-filet-fin: 1px solid var(--cc-encre);
  --cc-filet-doux: 1px solid #D9D4CA;  /* séparateurs discrets, jamais pour une bande */

  /* Typographie */
  --cc-font-titre: "Young Serif", Georgia, serif;
  --cc-font-texte: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cc-font-note: "Shantell Sans", "Comic Neue", cursive; /* provisoire : police manuscrite de Clément à venir */

  --cc-t-display: clamp(40px, 5.2vw, 64px);  /* hero */
  --cc-t-h1: clamp(32px, 3.8vw, 46px);
  --cc-t-h2: clamp(24px, 2.6vw, 32px);
  --cc-t-h3: clamp(19px, 1.8vw, 22px);
  --cc-t-lead: clamp(17px, 1.6vw, 19px);
  --cc-t-body: 16px;
  --cc-t-small: 14px;
  --cc-t-label: 10.5px;      /* petites capitales des bandes */
  --cc-t-note: 17px;         /* annotations manuscrites */

  --cc-lh-titre: 1.06;
  --cc-lh-texte: 1.55;
  --cc-ls-titre: -0.01em;
  --cc-ls-label: 0.16em;

  /* Espacements (base 4) */
  --cc-s-1: 4px; --cc-s-2: 8px; --cc-s-3: 12px; --cc-s-4: 16px; --cc-s-5: 24px;
  --cc-s-6: 32px; --cc-s-7: 48px; --cc-s-8: 64px; --cc-s-9: 96px;
  --cc-gouttiere: clamp(20px, 5vw, 56px);
  --cc-section: clamp(56px, 9vw, 112px);
  --cc-conteneur: 1180px;

  /* Formes */
  --cc-r-0: 0;          /* bandes, cartouches, logo : angles droits */
  --cc-r-1: 4px;        /* illustrations, images */
  --cc-r-2: 10px;       /* cartes */
  --cc-r-pill: 999px;   /* boutons */
}
