/*
 * tokens.css — Design tokens extraits du fichier Figma "Site Team Pookie"
 * (page "🎨 Design system"). Ne pas modifier les valeurs à la main :
 * si le Figma change, on re-synchronise ce fichier depuis les variables Figma.
 */

:root {
  /* Couleurs — marque */
  --color-primary: #8e48b5;
  --color-primary-on: #ffffff;
  --color-link: #8e48b5;

  /* Couleurs — accents */
  --color-accent-rose: #e569bb;
  --color-accent-peche: #ffcca1;
  --color-accent-saumon: #ffaaa7;

  /* Couleurs — pastels (fonds de cartes/blocs) */
  --color-pastel-rose: #f7d0e9;
  --color-pastel-peche: #ffeee2;
  --color-pastel-lilas: #dbc6e8;

  /* Couleurs — texte */
  --color-ink-default: #2b1240;
  --color-ink-muted: #5e3f78;

  /* Couleurs — surfaces */
  --color-surface-base: #fff7fb;
  --color-surface-raised: #ffffff;
  --color-surface-tint: #f6e6f5;
  --color-glass-panel: #ffffff;

  /* Couleurs — bordures et anneaux */
  --color-border-soft: #e6c8ee;
  --color-border-strong: #9a5fc0;
  --color-ring-default: #ffffff;

  /* Couleurs fixes du pied de page (toujours sombre avec texte clair,
     quel que soit le thème clair/sombre choisi par la personne qui
     visite — sinon le texte deviendrait illisible en mode sombre). */
  --color-footer-bg: #2b1240;
  --color-footer-text: #dbc6e8;

  /* Typographie — familles */
  --font-text: "Figtree", sans-serif;
  --font-heading: "Grandstander", sans-serif;
  --font-note: "Caveat", cursive;

  /* Typographie — échelle (desktop) */
  --text-h1-size: 44px;
  --text-h1-line: 48px;
  --text-h1-weight: 800;

  --text-h2-size: 34px;
  --text-h2-line: 40px;
  --text-h2-weight: 800;

  --text-h3-mobile-size: 22px;
  --text-h3-mobile-line: 28px;
  --text-h3-mobile-weight: 700;

  --text-eyebrow-size: 13px;
  --text-eyebrow-line: 16px;
  --text-eyebrow-weight: 700;
  --text-eyebrow-tracking: 8px; /* valeur Figma convertie en letter-spacing CSS lors de l'implémentation */

  --text-label-lg-size: 16px;
  --text-label-lg-line: 22px;
  --text-label-lg-weight: 700;

  --text-label-size: 14px;
  --text-label-line: 20px;
  --text-label-weight: 700;

  --text-body-lg-size: 18px;
  --text-body-lg-line: 28px;
  --text-body-lg-weight: 400;

  --text-body-sm-size: 14px;
  --text-body-sm-line: 22px;
  --text-body-sm-weight: 400;

  --text-note-size: 28px;
  --text-note-line: 32px;
  --text-note-weight: 700;

  --text-note-sm-size: 22px;
  --text-note-sm-line: 26px;
  --text-note-sm-weight: 700;

  /* Ombres */
  --shadow-douce: 0px 8px 24px 0px rgba(110, 69, 140, 0.16);

  /* Rayons courants observés dans la maquette */
  --radius-pill: 999px;
  --radius-card: 24px;
  --radius-panel: 28px;
  --radius-block: 40px;
}

/*
 * Mode sombre — première passe, en attendant d'avoir la maquette Figma
 * "🌙 Nuit" (pas encore récupérée). On garde les couleurs de marque
 * (--color-primary, les accents) et on assombrit surfaces/texte de façon
 * cohérente. À remplacer par les vraies valeurs Figma dès qu'elles sont
 * disponibles — ne touche qu'à ce bloc, le reste du CSS n'a pas à changer.
 */
/*
 * Mode nuit — valeurs officielles de la charte graphique TPK
 * (section "02 · Les couleurs" > "Deux thèmes différents").
 * Primaire et Lien reprennent volontairement les teintes Pêche/Saumon
 * de la marque (cf. charte) plutôt que des dérivés du violet.
 */
html[data-theme="sombre"] {
  --color-primary: #ffcca1;
  --color-primary-on: #2b1240;
  --color-link: #ffaaa7;

  --color-accent-rose: #e986c6;
  --color-accent-peche: #ffb87a;
  --color-accent-saumon: #ff9d99;

  --color-pastel-rose: #3a2033;
  --color-pastel-peche: #3a2c1f;
  --color-pastel-lilas: #2e2246;

  --color-ink-default: #fbeff7;
  --color-ink-muted: #d2bfe6;

  --color-surface-base: #1b1030;
  --color-surface-raised: #271744;
  --color-surface-tint: #33205a;
  --color-glass-panel: #271744;

  --color-border-soft: #40295c;
  --color-border-strong: #a878cc;
  --color-ring-default: #33205a;

  --shadow-douce: 0px 8px 24px 0px rgba(0, 0, 0, 0.45);
}