/* ═══════════════════════════════════════════════════════════════════
   TOKENS — Green Hill
   Palette Sonic : bleu du ciel et du héros, jaune des anneaux, rouge des
   chaussures, vert des collines, brun/orange du sol à damier.
   Les noms (--ink-*, --paper, --shu…) viennent de l'ancien thème et sont
   conservés : le reste du code les lit sans savoir qu'ils ont changé de sens.
     --ink-*  → les bleus nuit des panneaux (menus de jeu)
     --paper  → le blanc des textes
     --shu    → le jaune anneau (accent principal)
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Bleus nuit : panneaux et fonds sombres ────────────── */
  --ink-1000: #040A24;
  --ink-900:  #071033;
  --ink-800:  #0B1A4A;
  --ink-700:  #12266A;
  --ink-600:  #1A358C;
  --ink-500:  #2A4DB5;
  --ink-400:  #4A72D8;

  /* ── Blancs ────────────────────────────────────────────── */
  --paper:      #FFFFFF;
  --paper-warm: #FFF8DC;
  --paper-mute: #BFD4FF;
  --paper-dim:  #8CA6DC;

  /* ── Palette Sonic ─────────────────────────────────────── */
  --sonic:    #1F5BE6;   /* bleu Sonic */
  --sonic-hi: #4D8DFF;
  --shoe:     #E8262F;   /* rouge des chaussures */
  --shu:      #FFD21A;   /* jaune anneau — accent principal */
  --shu-deep: #E39A00;
  --shu-2:    #FF8A1F;   /* orange : l'ombre de l'anneau */
  --gold:     #FFD21A;
  --ai:       #1F5BE6;
  --grass:    #3CC24A;
  --dirt:     #C8702A;

  /* ── Rôles sémantiques ─────────────────────────────────── */
  --bg:        var(--ink-900);
  --bg-raise:  var(--ink-800);
  --fg:        var(--paper);
  --fg-mute:   var(--paper-mute);
  --fg-dim:    var(--paper-dim);
  --rule:      color-mix(in srgb, #fff 22%, transparent);
  --rule-soft: color-mix(in srgb, #fff 10%, transparent);
  --accent:    var(--shu);
  --accent-2:  var(--shu-2);

  /* ── Surfaces de menu ──────────────────────────────────────
     Le panneau Sonic : dégradé bleu, liseré clair à l'intérieur, trait noir
     à l'extérieur, ombre dure décalée. */
  --glass:        color-mix(in srgb, var(--ink-700) 88%, transparent);
  --glass-hi:     color-mix(in srgb, var(--ink-600) 92%, transparent);
  --glass-border: #fff;
  --glow:         color-mix(in srgb, var(--accent) 55%, transparent);
  --outline:      #000;
  --hard-shadow:  5px 5px 0 0 #000;

  --grad-accent: linear-gradient(180deg, #FFE866 0%, var(--shu) 45%, var(--shu-2) 100%);
  --grad-paper:  linear-gradient(180deg, #fff 0%, var(--paper-mute) 100%);

  /* ── Typographie ───────────────────────────────────────── */
  --font-display: "Press Start 2P", "Courier New", monospace;
  --font-sans:    "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", "Cascadia Mono", ui-monospace,
                  "Courier New", monospace;

  /* Press Start 2P est très large (1 caractère = 1 em) : l'échelle est
     calculée pour que « TOMIOKA » (7 lettres) tienne dans l'écran. */
  --t-display: clamp(2.1rem, 9.4vw, 10.5rem);
  --t-h2:      clamp(1.5rem, 4.6vw, 4.6rem);
  --t-h3:      clamp(1rem, 1.6vw, 1.4rem);
  --t-lead:    clamp(1.1rem, 1.5vw, 1.45rem);
  --t-body:    clamp(0.98rem, 1.05vw, 1.1rem);
  --t-small:   clamp(0.72rem, 0.78vw, 0.8rem);
  --t-micro:   0.6875rem;

  --track-mono: 0.14em;
  --track-tight: -0.04em;

  /* ── Rythme spatial ────────────────────────────────────── */
  --gutter:  clamp(1.25rem, 4vw, 4.5rem);
  --sp-sect: clamp(6rem, 14vw, 15rem);
  --sp-lg:   clamp(2.5rem, 5vw, 5rem);
  --sp-md:   clamp(1.5rem, 2.5vw, 2.25rem);
  --sp-sm:   clamp(0.75rem, 1.2vw, 1rem);

  --col-gap: clamp(0.75rem, 1.3vw, 1.25rem);
  --radius:  4px;
  --radius-lg: 8px;          /* les panneaux Sonic sont presque carrés */

  /* ── Mouvement ─────────────────────────────────────────── */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-ink:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-pop:  cubic-bezier(0.34, 1.56, 0.64, 1);   /* le petit rebond d'un ressort */
  --dur-fast:  0.35s;
  --dur-mid:   0.7s;
  --dur-slow:  1.2s;

  /* ── Empilement ────────────────────────────────────────── */
  --z-ink: 0;
  --z-content: 10;
  --z-grain: 60;
  --z-nav: 70;
  --z-progress: 80;
  --z-flash: 85;
  --z-cursor: 90;
  --z-loader: 100;

  /* Posé au chargement par scripts/sprites.js : l'anneau, réutilisable en CSS
     partout où il faut une puce, un sceau ou un séparateur. */
  --ring-url: none;
}

/* ═══════════════════════════════════════════════════════════════════
   MODES — JOUR / NUIT

   Même scène (voir scripts/gl-ink.js), deux ambiances :
     · shu       Green Hill de jour — ciel bleu, soleil qui se couche au fil
                 de la lecture.
     · murasaki  Nuit étoilée — Starlight Zone : bleu-noir, accent cyan.
   `--gl-night` est lu par le shader, qui fond d'une ambiance à l'autre.
   ═══════════════════════════════════════════════════════════════════ */

:root,
[data-mode="shu"] {
  --gl-night:   0;
  --gl-accent:  1.000 0.824 0.102;
  --gl-accent2: 1.000 0.541 0.122;
  --gl-base:    0.027 0.063 0.200;
}

[data-mode="murasaki"] {
  --ink-1000: #02051A;
  --ink-900:  #050A2A;
  --ink-800:  #0A1245;
  --ink-700:  #101C63;
  --ink-600:  #182A85;

  --shu:      #6FF0FF;     /* cyan d'émeraude du chaos */
  --shu-deep: #1DB4CC;
  --shu-2:    #B28CFF;
  --gold:     #6FF0FF;

  --gl-night:   1;
  --gl-accent:  0.435 0.941 1.000;
  --gl-accent2: 0.698 0.549 1.000;
  --gl-base:    0.020 0.039 0.165;
}

/* ── Panneaux clairs : le crème des sections « terre » ───── */
[data-theme="paper"] {
  --bg:        #FFF1C1;
  --bg-raise:  #FFF8DC;
  --fg:        #0B1546;
  --fg-mute:   #2B3F8F;
  --fg-dim:    #5B6FB8;
  --rule:      color-mix(in srgb, #0B1546 22%, transparent);
  --rule-soft: color-mix(in srgb, #0B1546 10%, transparent);
  --accent:    var(--sonic);
  --accent-2:  var(--shoe);
  --glass:        color-mix(in srgb, #0B1546 5%, transparent);
  --glass-hi:     color-mix(in srgb, #0B1546 9%, transparent);
  --glass-border: color-mix(in srgb, #0B1546 22%, transparent);
}