/* ==========================================================================
   TOKENS — la direction artistique, en variables.
   C'est le seul fichier où une couleur ou une taille est écrite « en dur ».

   Trois étages :
     1. Primitives   la matière brute : la palette, la grille de pixels.
     2. Rôles        ce que chaque valeur VEUT DIRE : fond, texte, action…
                     Les composants (components.css) n'utilisent QUE ces rôles.
     3. Personnes    la couleur de Mehdi et celle de Jasmine.

   Changer la DA = changer ce fichier. Tout le reste suit.
   ========================================================================== */

/* Ordre des couches CSS, du plus faible au plus fort : une règle de `app` gagne toujours sur un composant,
   sans course à la spécificité. */
@layer reset, tokens, base, components, app;

@layer tokens {
  :root {
    /* --- 1. Primitives ---------------------------------------------------- */

    --black: #000;
    --white: #fff;
    --gray-800: #1c1c1c;
    --gray-500: #7a7a7a;
    --pink: #ff6ec7;
    --violet: #8f5cff;
    --ut-orange: #ff7f27;   /* les boutons d'Undertale */
    --ut-yellow: #ff0;      /* bouton appuyé */

    /* Grille. La police (Determination Sans) est dessinée sur 16 unités : elle n'est nette que si
       1 pixel de police = un nombre ENTIER de pixels d'écran. --dot est ce pixel, recalé selon la
       densité de l'écran (1 px, 3 ou 4 pixels physiques). Tout le reste en est un multiple : rien n'est flou. */
    --dot: 1px;

    /* --- 2. Rôles --------------------------------------------------------- */

    --color-bg: var(--black);
    --color-text: var(--white);
    --color-text-muted: var(--gray-500);
    --color-action: var(--ut-orange);
    --color-action-hot: var(--ut-yellow);
    --color-action-off: var(--gray-500);  /* bouton verrouillé */
    --color-cell-empty: var(--gray-800);
    --color-star: var(--white);
    --color-star-far: var(--gray-500);

    /* Pixel d'art : bordures, étoiles, persos. 3 pixels de police. */
    --px: calc(var(--dot) * 3);

    /* Typo : 4 tailles, pas une de plus */
    --font-pixel: "Determination", ui-monospace, "Courier New", monospace;
    --text-0: 16px;                       /* taille native de la police : nette partout (petits textes) */
    --text-1: calc(var(--dot) * 16);      /* texte courant */
    --text-2: calc(var(--dot) * 32);      /* titre, compteurs */
    --text-3: calc(var(--dot) * 48);      /* le nombre dans le cœur */
    --leading: 1.25;                      /* 16 × 1.25 = 20 pixels de police : l'interligne tombe aussi sur la grille */

    /* Espacements : multiples du pixel d'art */
    --space-1: var(--px);
    --space-2: calc(var(--px) * 2);
    --space-3: calc(var(--px) * 3);
    --space-4: calc(var(--px) * 4);
    --space-6: calc(var(--px) * 6);

    /* Contour noir net (pas une ombre floue) : garde un texte lisible sur les cases colorées */
    --outline-text:
      var(--dot) 0 0 var(--black), calc(var(--dot) * -1) 0 0 var(--black),
      0 var(--dot) 0 var(--black), 0 calc(var(--dot) * -1) 0 var(--black);

    /* Persos : hauteur d'affichage (24 pixels d'art). Le PNG peut avoir n'importe quelle taille. */
    --sprite-h: calc(var(--px) * 24);

    /* --- 3. Personnes ----------------------------------------------------- */

    --color-mehdi: var(--violet);
    --color-jasmine: var(--pink);
  }

  /* Recalage de --dot : 1 pixel de police = 3 pixels physiques (écrans ×2) ou 4 (écrans ×3). */
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
    :root { --dot: 1.5px; }
  }
  @media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
    :root { --dot: calc(4px / 3); }
  }

  /* Écrans courts (iPhone SE…) : persos un cran plus petits pour que tout tienne sans défiler. */
  @media (max-height: 700px) {
    :root { --sprite-h: calc(var(--dot) * 48); }
  }
}