/*
 * PetalKit — vitrine · jetons.
 *
 * COUCHES 1 et 2 RECOPIEES de src/design/tokens.css — memes hex, memes noms.
 * Le site ne partage pas le bundle du produit, il partage ses VALEURS
 * (PLAN-SITE.md § « Le DS du site »). La couche 3 (le pont
 * `--figma-color-*`) n'a aucun sens hors du plugin : elle n'est pas reprise.
 *
 * ⚠ Ce fichier est un MIROIR. Il ne s'invente rien : une couleur qui bouge
 * dans src/design/tokens.css se reporte ici a l'identique. Les gardes du
 * produit (tokens-echelle, tokens-rayon, tokens-contrast, parite Figma) ne
 * lisent que `src/` — elles ne verront jamais une derive posee ici, et c'est
 * la raison pour laquelle rien ne se decide dans ce fichier.
 *
 * Ce qui S'AJOUTE vit dans le bloc « COUCHE SITE » en bas : uniquement ce que
 * l'echelle du panneau (10-24) ne peut pas dire a l'echelle d'un navigateur.
 * Cote Figma ces ajouts vivent dans une collection A PART — « 🌐 Site ·
 * Mesures » — pour que « 📏 PetalKit · Mesures » reste le miroir exact du
 * plugin.
 */

:root {
  /* ═══ COUCHE 1 · PRIMITIVES ══════════════════════════════════════════════
   * Les papiers : du blanc au gris-perle pio. Les encres : le bleu-noir pio
   * et ses voilages. La chaux : la seule couleur.
   * ══════════════════════════════════════════════════════════════════════ */
  --paper-0: #ffffff;
  --paper-100: #f7f8f9;
  --paper-200: #f1f3f5;
  --paper-300: #e6e8eb;

  --ink-900: #000a19;
  --ink-600: #445160;
  --ink-500: #5f6870;
  --ink-400: #6e7883;

  --line-200: #e1e4e8;
  --line-300: #cfd4d9;

  --chaux-200: #f0f9be;
  --chaux-300: #e6f0a3;

  --green-700: #177243;
  --amber-700: #8a5c00;
  --red-700: #b3362a;
  --blue-700: #175ea8;

  /* ═══ COUCHE 2 · SEMANTIQUE ═════════════════════════════════════════════ */

  /* ── Surfaces ─────────────────────────────────────────────────────────── */
  --bg-base: var(--paper-0);
  --bg-surface: var(--paper-100);
  --bg-card: var(--paper-200);
  --bg-elevated: var(--paper-300);

  /* SEPARER avec --border, DELIMITER UN CONTROLE avec --border-control. */
  --border: var(--line-200);
  --border-hover: var(--line-300);
  --border-control: var(--ink-400);

  /* ── Texte ────────────────────────────────────────────────────────────── */
  --text-primary: var(--ink-900);
  --text-secondary: var(--ink-600);
  --text-tertiary: var(--ink-500);

  /* ── Action ───────────────────────────────────────────────────────────── */
  /*
   * LA couleur. La chaux se pose en APLAT et porte l'encre. Le survol
   * ASSOMBRIT (on est en clair). `--accent` ne sert JAMAIS de couleur de
   * texte : mesuree au moteur du produit, elle tient 1,01 a 1,11:1 sur les
   * quatre papiers — sous les 3:1 de SC 1.4.11. Un aplat de chaux ne porte
   * donc jamais seul une information : il se double d'une marque d'encre.
   */
  --petal: var(--chaux-200);
  --petal-hover: var(--chaux-300);
  --petal-subtle: color-mix(in srgb, var(--chaux-200) 45%, transparent);

  --accent: var(--petal);
  --accent-hover: var(--petal-hover);
  /* L'encre posee SUR l'aplat de chaux (mesure : 17,97:1). */
  --accent-ink: var(--ink-900);

  /* ── Semantique d'etat ────────────────────────────────────────────────── */
  /* Des encres teintees, jamais des aplats : un etat porte toujours un glyphe
     et un mot (SC 1.4.1). La couleur ne fait que confirmer. */
  --success: var(--green-700);
  --destructive: var(--amber-700);
  --error: var(--red-700);
  --info: var(--blue-700);

  /* ── Espacement (base 4) ──────────────────────────────────────────────── */
  /* Le nom porte le multiple : `--gap-N` vaut N × 4 px. */
  --gap-1: 4px;
  --gap-2: 8px;
  --gap-3: 12px;
  --gap-4: 16px;
  --gap-5: 20px;
  --gap-6: 24px;
  --gap-8: 32px;
  --gap-10: 40px;
  --gap-12: 48px;
  --gap-14: 56px;
  --gap-16: 64px;
  --gutter: var(--gap-4);

  /* ── Hauteurs ─────────────────────────────────────────────────────────── */
  --height-chip: 24px;
  --height-compact: 24px;
  --height-control: 40px;
  --height-row: 48px;
  --height-toolbar: 48px;
  --height-line: 56px;
  --height-actionbar: 72px;

  /* ── Traits ───────────────────────────────────────────────────────────── */
  --border-width-hairline: 1px;

  /* ── Rayons ───────────────────────────────────────────────────────────── */
  /* 4 px la signature pio (CONTROLES), 8 la CARTE, 16 les grands medias.
     Chaque valeur est UNIQUE. */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ── Typographie ──────────────────────────────────────────────────────── */
  /* Sans pour la prose, mono pour la machine ET le systeme (mesures, boutons,
     labels, eyebrows, badges — en uppercase). Les piles de repli sont
     REELLES : si le woff2 de fonts.css ne charge pas, la page reste composee
     sur les polices systeme. */
  --font-sans: "Geist Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* SEPT degres, ceux de la collection Figma « 📏 PetalKit · Mesures », et
     rien entre eux. Ils restent l'echelle des COMPOSANTS du site. */
  --text-2xs: 10px;   /* texte/etiquette — badges, chips, ligne de statut */
  --text-xs: 11px;    /* texte/commande — boutons, eyebrows */
  --text-sm: 12px;    /* texte/petit */
  --text-md: 13px;    /* texte/corps */
  --text-xl: 15px;    /* texte/titre */
  --text-2xl: 19px;
  --text-3xl: 24px;   /* texte/affichage */

  /* Une seule graisse nommee : celle des titres et des commandes. La prose
     est en regular (400) ; ce qui se nomme est ce qui s'ecarte. */
  --w-title: 500;

  --track-title: -0.02em;
  --track-label: 0.06em;

  /* ── Mouvement ────────────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.2, 0.9, 0.25, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.25, 1);
  --dur-fast: 110ms;
  --dur-base: 200ms;
  --dur-reveal: 360ms;
  --reveal-shift: 12px;

  /* ── Verre ────────────────────────────────────────────────────────────── */
  /* Toujours doubler d'un repli opaque AVANT le translucide, pour les moteurs
     sans backdrop-filter. */
  --glass-bg: rgba(230, 232, 235, 0.66);
  --glass-bg-elevated: rgba(241, 243, 245, 0.72);
  --glass-blur: blur(16px);
  --scrim: rgba(0, 10, 25, 0.28);

  /* ── Ombres ───────────────────────────────────────────────────────────── */
  /* Les DEUX seules du systeme. Aucune ombre decorative. */
  --shadow-form: -1px 1px 3px rgba(35, 54, 70, 0.03), -6px 2px 6px rgba(35, 54, 70, 0.03);
  --shadow-overlay: 0 8px 30px rgba(0, 10, 25, 0.12);

  /* ═══ COUCHE SITE ════════════════════════════════════════════════════════
   * Ce que l'echelle du panneau ne peut pas dire a l'echelle d'un navigateur,
   * et RIEN de plus. Tout sur la grille de 4. Collection Figma « 🌐 Site ·
   * Mesures ».
   *
   * Les trois degres de texte ci-dessous NE remplacent pas l'echelle a sept
   * degres : ils la prolongent vers le haut. Les composants du site (boutons
   * 11, etiquettes 10, prose 13→15) restent sur les jetons du produit.
   * ══════════════════════════════════════════════════════════════════════ */

  /* Titre de section. 32 = 8 × 4. */
  --site-text-section: 32px;
  /* L'affichage web : le chiffre de la bande de nombres, le prix. 48 = 12 × 4. */
  --site-text-display: 48px;
  /* L'enonce du heros, LUI SEUL. Fluide 40 → 72, les deux bornes sur la
     grille de 4 (10 × 4 et 18 × 4). */
  --site-text-hero: clamp(40px, 6vw, 72px);

  /*
   * Les DEUX degres DECORATIFS. Ils ne portent aucune information : la bande
   * qui defile est `aria-hidden`, le numero d'etape aussi — ce qui se lit vit
   * dans les cartes a cote. C'est la seule raison pour laquelle ils ont le
   * droit d'exister hors de l'echelle : ils ne sont pas du TEXTE, ils sont une
   * matiere. Valeurs mobiles ici, valeurs pleines au breakpoint 720 — meme
   * mecanique que `--site-gutter`.
   *
   *   marquee  64 → 140 (16 × 4 → 35 × 4)
   *   etape    72 → 144 (18 × 4 → 36 × 4)
   */
  --site-text-marquee: 64px;
  --site-text-step: 72px;

  /*
   * LE VOILE DES PHOTOS PLEIN CADRE. La seule couleur que la couche site
   * ajoute, et elle n'ajoute pas une TEINTE : c'est l'encre du systeme, a une
   * autre opacite. Elle existe parce que `--scrim` (0,28) est calibre pour un
   * fond de dialogue, pas pour porter du texte blanc sur une photo inconnue.
   *
   * Le calcul, cas le pire (photo entierement blanche sous le voile) :
   *   alpha 0,28 → fond rgb(184,186,191) → blanc sur fond 1,94:1  ECHEC
   *   alpha 0,55 → fond rgb(115,120,128) → 4,43:1                 limite
   *   alpha 0,62 → fond rgb(97,103,112)  → 5,70:1                 RETENU
   * On garde 0,62 : au-dessus du seuil avec de la marge, et le texte reste
   * blanc quelle que soit la photo qu'on posera derriere.
   */
  --site-scrim-photo: rgba(0, 10, 25, 0.62);

  /* Respiration verticale de section. 96 = 24 × 4 · 128 = 32 × 4. */
  --site-space-24: 96px;
  --site-space-32: 128px;

  /* Largeur max de contenu : 1120 = 280 × 4. */
  --site-container: 1120px;

  /* Marges laterales : la gouttiere du site, distincte du `--gutter` de 16 px
     du panneau — un navigateur n'a pas la largeur d'une fenetre de plugin.
     Valeur mobile ici ; le passage a 32 se fait au breakpoint 720. */
  --site-gutter: 20px;

  /* La prose du site monte d'un degre par rapport au panneau : relue a
     distance d'ecran de bureau, le 13 du plugin devient 15. C'est le SEUL
     glissement de role que le site s'autorise. */
  --site-text-prose: var(--text-xl);

  /* ── Mouvement a l'echelle page ───────────────────────────────────────── *
   * Le CARACTERE ne change pas — memes courbes que le produit, `--ease-out`
   * et `--ease-in-out` sont repris tels quels. Seules les DUREES et la course
   * changent, parce qu'une page defile la ou un panneau se monte :
   *
   *   survol   110 ms (panneau) → 250 ms : un survol a la souris sur une
   *            grande cible se lit plus lentement qu'un survol de puce ;
   *   reveler  360 ms / 12 px   → 500 ms / 20 px : la course d'entree suit la
   *            taille du bloc qui entre.
   *
   * Les jetons du produit restent declares au-dessus et intacts : ce sont
   * deux echelles, pas une correction.
   */
  --site-dur-hover: 250ms;
  --site-dur-reveal: 500ms;
  --site-reveal-shift: 20px;
  /* L'escalier des grilles. Pose en `--i` sur chaque element revele. */
  --site-stagger: 60ms;
}

/* Gouttiere desktop. Les deux breakpoints du site sont 720 et 1024 ; la
   gouttiere bascule au premier, la grille des previews au second. */
@media (min-width: 720px) {
  :root {
    --site-gutter: 32px;
    --site-text-marquee: 140px;
    --site-text-step: 144px;
  }
}