/**
 * Akanzu - tokens de la direction « Plein Jour »
 *
 * SOURCE UNIQUE DE VERITE. Aucun autre fichier n'a le droit d'inventer une couleur,
 * un rayon ou une graduation. Si une valeur manque ici, elle se decide ici d'abord.
 *
 * Regle de couleur : une couleur par univers de produit, une seule couleur d'action,
 * aucune texture. La couleur porte l'information, elle ne decore pas.
 * Detail : design/direction-b-plein-jour.md
 */

:root {
  /* --- Structure ------------------------------------------------------- */
  --ak-paper: #FBFAF6;        /* fond des blocs de contenu */
  --ak-ground: #F2EFE7;       /* fond de page, sur lequel les blocs se posent */
  --ak-ink: #1E2321;          /* texte principal et fonds sombres. Jamais #000 */
  --ak-ink-soft: #5F6663;     /* texte secondaire. 5,7:1 sur paper, conforme AA */
  --ak-ink-mute: #8A928D;     /* meta et surtitres. Jamais sous 18px */
  --ak-line: #E7E3DA;         /* filets et contours. Un seul poids : 1px */

  /* --- Action -----------------------------------------------------------
   * L'action est NEUTRE, et c'est une decision, pas un defaut.
   *
   * Relecture des references le 2026-08-31 : dans PILLS, le bouton EXPLORE du
   * hero est noir, et ceux des blocs aussi. La couleur vit dans les aplats
   * pastel, l'action n'y participe pas. Dans Hotto les boutons sont violets,
   * mais ce violet est partout ailleurs : barre de stats, etoiles, badges.
   *
   * Le vert pin precedent etait le seul element vert du site. Rattache a rien,
   * il se lisait comme un corps etranger sur des cartes claires. Le probleme
   * n'etait pas sa teinte mais son isolement.
   *
   * Regle qui remplace la precedente : la couleur porte l'information dans les
   * blocs d'univers, l'action reste neutre, et --ak-pop est le seul signal.
   */
  --ak-accent: #1E2321;       /* l'action prend l'encre. Contraste maximal */
  --ak-accent-dark: #39423F;  /* survol : l'encre s'eclaircit au lieu de virer */
  --ak-pop: #D9542B;          /* signal rare : soldes, rupture. Jamais deux par ecran */

  /* --- Univers ---------------------------------------------------------
   * Confirmes sur le catalogue reel le 2026-08-30. Une categorie garde sa
   * teinte partout, du bloc d'accueil a la fiche produit.
   * Promo n'est pas un univers mais une surcouche commerciale : elle prend --ak-pop.
   */
  --ak-femme: #E7E1F2;        /* Women, 142 produits */
  --ak-junior: #DBE6F2;       /* Youth, 145 produits */
  --ak-homme: #F4DED6;        /* Men, 16 produits */
  --ak-accessoires: #F5EACC;  /* Accessories, 24 produits */
  --ak-bienetre: #DBEADF;     /* Health & Wellness, 13 produits */

  /* Fond des packshots hors contexte de categorie.
   * C'est cette valeur qu'on donne a l'IA qui uniformise les fonds photo. */
  --ak-packshot: #F3F1EC;

  /* --- Typographie ------------------------------------------------------ */
  --ak-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --ak-text: "Figtree", "Segoe UI", system-ui, sans-serif;

  --ak-fs-bleed: clamp(88px, 14vw, 260px); /* le mot qui deborde */
  --ak-fs-display: clamp(34px, 4.4vw, 56px);
  --ak-fs-section: clamp(26px, 2.6vw, 34px);
  --ak-fs-product: 18px;
  --ak-fs-body: 16px;
  --ak-fs-small: 14px;
  --ak-fs-label: 11px;        /* surtitres, capitales, interlettrage 0.16em */

  --ak-lh-tight: 1.02;
  --ak-lh-body: 1.6;
  --ak-ls-display: -0.025em;
  --ak-ls-label: 0.16em;
  --ak-ls-bleed: -0.05em;

  /* --- Espacement, base 4 ----------------------------------------------- */
  --ak-s1: 4px;
  --ak-s2: 8px;
  --ak-s3: 12px;
  --ak-s4: 16px;
  --ak-s5: 22px;
  --ak-s6: 28px;
  --ak-s7: 40px;
  --ak-s8: 56px;
  --ak-s9: 76px;

  /* --- Formes ------------------------------------------------------------ */
  --ak-r-block: 28px;         /* blocs de page */
  --ak-r-card: 20px;          /* cartes */
  --ak-r-img: 24px;           /* images */
  --ak-r-field: 14px;         /* champs de formulaire */
  --ak-r-pill: 999px;         /* boutons et pastilles */

  /* Une seule ombre sur tout le site, reservee aux cartes qui flottent
   * au-dessus d'un aplat. Nulle part ailleurs. */
  --ak-shadow: 0 8px 24px rgba(30, 35, 33, .07);
  --ak-shadow-lift: 0 14px 34px rgba(30, 35, 33, .12);

  /* --- Mouvement --------------------------------------------------------- */
  --ak-ease: cubic-bezier(.34, 1.2, .4, 1);
  --ak-dur: 420ms;
  --ak-dur-fast: 240ms;
}

/* La direction n'a pas de mode sombre : il a ete ecarte au charting.
 * On respecte quand meme la preference de mouvement reduit, sans exception. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ak-dur: 1ms;
    --ak-dur-fast: 1ms;
  }
}

/* Teinte d'univers.
 *
 * La classe se pose sur le <body> pour une page de categorie, ou directement
 * sur un bloc quand une meme page en montre plusieurs, comme la grille de
 * l'accueil. Le selecteur ne cible donc aucun element en particulier : c'est ce
 * qui permet a --ak-univers de cascader depuis n'importe ou.
 *
 * Tout le reste du CSS lit --ak-univers et n'a jamais besoin de connaitre la
 * categorie ni l'endroit ou la classe a ete posee. */
:root { --ak-univers: var(--ak-packshot); }
.ak-u-femme { --ak-univers: var(--ak-femme); }
.ak-u-junior { --ak-univers: var(--ak-junior); }
.ak-u-homme { --ak-univers: var(--ak-homme); }
.ak-u-accessoires { --ak-univers: var(--ak-accessoires); }
.ak-u-bienetre { --ak-univers: var(--ak-bienetre); }