/* Pocket Puzzle — generated from tokens.json */
:root, [data-theme="n01"] {
  --blue: #408dbe;
  --navy: #1e417e;
  --yellow: #eab83c;
  --pink: #d46ca7;
  --green: #408b47;
  --forest: #24522b;
  --red: #c9321f;
  --orange: #dd5f27;
  --yellow-deep: #c88f00;
  --green-deep: #2e6532;
  --red-deep: #9f2719;
  --pink-deep: #a55484;
  --navy-deep: #162e5a;
  --cream: #f1eae2;
  --grey: #cbc4bc;
  --stage: #000000;
  --arrow: #a0a0a0;
  --grey-700: #6e6e6e;
  --grey-500: #aaaaaa;
  --grey-300: #d7d7d7;
  --pack-card: var(--blue);
  --pack-frame: var(--yellow);
  --pack-slot: var(--yellow-deep);
  --pack-panel: var(--navy);
  --pack-band: var(--yellow);
  --pack-byline: var(--navy);
  --pack-series: var(--yellow);
  --pack-level: var(--yellow);
  --pack-ink: var(--cream);
  --play-fill: var(--green);
  --play-ring: var(--grey);
  --seam: var(--grey);
  --title-offset: 0.06em 0.03em 0 #eab83c;
}
[data-theme="n02"] {
  --pack-card: var(--pink);
  --pack-frame: var(--green);
  --pack-slot: var(--green-deep);
  --pack-panel: var(--forest);
  --pack-band: var(--green);
  --pack-byline: var(--forest);
  --pack-series: var(--blue);
  --pack-level: var(--blue);
  --title-offset: 0.06em 0.03em 0 #408dbe;
}
[data-theme="n03"] {
  --pack-card: var(--navy);
  --pack-frame: var(--red);
  --pack-slot: var(--red-deep);
  --pack-panel: var(--green);
  --pack-band: var(--red);
  --pack-byline: var(--red);
  --pack-series: var(--green);
  --pack-level: var(--green);
  --title-offset: 0.06em 0.03em 0 #eab83c;
}
[data-theme="n04"] {
  --pack-card: var(--forest);
  --pack-frame: var(--pink);
  --pack-slot: var(--pink-deep);
  --pack-panel: var(--blue);
  --pack-band: var(--orange);
  --pack-byline: var(--blue);
  --pack-series: var(--pink);
  --pack-level: var(--orange);
  --title-offset: 0.06em 0.03em 0 #d46ca7;
}
[data-theme="n05"] {
  --pack-card: var(--blue);
  --pack-frame: var(--navy);
  --pack-slot: var(--navy-deep);
  --pack-panel: var(--pink);
  --pack-band: var(--navy);
  --pack-byline: var(--green);
  --pack-series: var(--navy);
  --pack-level: var(--pink);
  --title-offset: 0.06em 0.03em 0 #1e417e;
}
/* N°06 La Fleur rouge (niveau 3) — couleurs mesurées sur le mockup de packaging fourni
   par l'utilisateur (img/IMG_3035.PNG) : jaune/rouge/navy, toutes déjà dans la palette
   existante (pas de nouvelle couleur). */
[data-theme="n06"] {
  --pack-card: var(--yellow);
  --pack-frame: var(--red);
  --pack-slot: var(--red-deep);
  --pack-panel: var(--navy);
  --pack-band: var(--red);
  --pack-byline: var(--navy);
  --pack-series: var(--red);
  --pack-level: var(--navy);
  --title-offset: 0.06em 0.03em 0 #c9321f;
}
[data-theme="gabarit"] {
  --pack-card: var(--grey-700);
  --pack-frame: var(--grey-500);
  --pack-slot: var(--grey-500);
  --pack-panel: var(--stage);
  --pack-band: var(--grey-300);
  --pack-byline: var(--stage);
  --pack-series: var(--grey-300);
  --pack-level: var(--grey-500);
  --title-offset: 0.06em 0.03em 0 #aaaaaa;
}
:root {
  --pack-width-mobile: 320px;
  --pack-width-desktop: 480px;
  --space-2: 16px;
  --space-5: 40px;
  --radius-tile: 0;
  --radius-frame: 22px;
  --radius-card: 48px;
  --radius-pill: 999px;
  --font-display: "Savate", "Arial Black", sans-serif;
  --font-text: "Space Grotesk", system-ui, sans-serif;
}
.pack-title { font-family: var(--font-display); font-size: 88px; line-height: 0.9; font-weight: 600; letter-spacing: 0.09em; }
.series-number { font-family: var(--font-display); font-size: 26px; line-height: 1; font-weight: 600; }
.play-label { font-family: var(--font-display); font-size: 26px; line-height: 1; font-weight: 600; }
.frame-title { font-family: var(--font-text); font-size: 28px; line-height: 1.1; font-weight: 600; }
.tagline-wide { font-family: var(--font-text); font-size: 19px; line-height: 1.2; font-weight: 500; letter-spacing: 0.12em; }
.level { font-family: var(--font-text); font-size: 17px; line-height: 1; font-weight: 500; }
.panel { font-family: var(--font-text); font-size: 15px; line-height: 1.4; font-weight: 400; }
.byline { font-family: var(--font-text); font-size: 14px; line-height: 1; font-weight: 600; letter-spacing: 0.02em; }
.fine-print { font-family: var(--font-text); font-size: 12px; line-height: 1.3; font-weight: 400; }
@font-face { font-family: "Savate"; src: url("fonts/Savate-Variable.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("fonts/SpaceGrotesk-Variable.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }