/* =========================================================
   THÈME : "YourName", version sticker / cartoon analogique.
   Un carnet de notes posé sous le ciel du crépuscule : papier crème
   grainé, scotch washi, encre épaisse, stickers découpés au contour
   blanc, ombres dures décalées. La comète (bleu et rose) et le fil
   rouge tressé restent les 2 fils narratifs.
   app.css n'utilise QUE ces variables.
   ========================================================= */
@font-face { font-family: 'Display'; src: url('../fonts/display.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Body'; src: url('../fonts/body.woff2') format('woff2'); font-weight: 400 600; font-display: swap; }
@font-face { font-family: 'Body'; src: url('../fonts/body-bold.woff2') format('woff2'); font-weight: 700 900; font-display: swap; }
@font-face { font-family: 'Hand'; src: url('../fonts/hand.woff2') format('woff2'); font-display: swap; }

:root {
  /* Fond : ciel imprimé (dégradé + trame de points + grain) */
  --bg: #211d55;
  --bg-2: #4b3487;
  --bg-3: #ff8a6a;
  --bg-texture:
    radial-gradient(circle, #ffffffd0 0 1.2px, transparent 1.8px) 0 0 / 89px 77px,
    radial-gradient(circle, #ffe9a8a0 0 1px, transparent 1.6px) 31px 47px / 127px 113px;
  --halftone: radial-gradient(circle, #ffb08a66 0 1.6px, transparent 2.2px) 0 0 / 9px 9px;
  --grain: url('../img/grain.svg');
  --grain-paper: url('../img/grain-paper.svg');
  --fibers: url('../img/fibers.svg');

  /* Papier du carnet */
  --surface: #fff7e8;
  --surface-2: #f6e6cb;
  --surface-line: #ead6b6;
  --kraft: #d9b383;
  --ink: #1b1638;
  --ink-2: #6a5f7e;
  --ink-strong: #1b1638;
  --on-bg: #fff7e8;
  --on-bg-2: #d8cff2;
  --sticker: #ffffff;           /* contour blanc des stickers */

  /* Accents */
  --accent: #ff6b5e;            /* rouge cordelette, bouton principal */
  --accent-2: #5cc8ff;          /* comète bleue */
  --accent-3: #ff9ccf;          /* comète rose */
  --accent-ink: #1b1638;
  --sun: #ffd84a;               /* jaune surligneur / blob actif */
  --mint: #8fe3c4;
  --cord-1: #e8343a;
  --cord-2: #ff9a3c;
  --cord-3: #ffd84a;
  --good: #2fae74;
  --bad: #e8343a;
  --mark: #ffd84a;

  /* Washi tape (scotch) */
  --tape-1: #ff9ccfb8;
  --tape-2: #8fe3c4c0;
  --tape-3: #ffd84ac0;
  --tape-4: #5cc8ffa8;

  /* Monnaie (éclat de comète) et boîte du sanctuaire */
  --coin: #8fdcff;
  --coin-2: #2f8fd6;
  --chest: #d8343f;
  --chest-2: #ff5a5f;
  --chest-band: #ffd84a;
  --glow: #fff2b8;
  --shadow-color: #1b163855;

  /* Raretés */
  --r-common: #b7aed0;
  --r-rare: #5cc8ff;
  --r-epic: #c78bff;
  --r-legendary: #ffb23f;
  /* Raretés des cadres (5 niveaux) : commun, rare, élite, mythique, légendaire */
  --r-elite: #c78bff;
  --r-mythic: #ff5fa8;

  /* Particules */
  --fx-1: #ff6b5e; --fx-2: #5cc8ff; --fx-3: #ff9ccf; --fx-4: #ffd84a;

  /* Typo : contraste massif / arrondi / manuscrit */
  --font-display: 'Display', 'Arial Black', sans-serif;
  --font-body: 'Body', system-ui, sans-serif;
  --font-hand: 'Hand', 'Comic Sans MS', cursive;

  /* Formes : coins irréguliers, bordures épaisses, ombres dures décalées */
  --radius: 18px 22px 16px 24px / 22px 16px 24px 18px;
  --radius-sm: 12px 15px 11px 16px / 15px 11px 16px 12px;
  --border: 3px solid var(--ink);
  --shadow: 5px 6px 0 var(--ink);
  --shadow-press: 1px 2px 0 var(--ink);
  --shadow-soft: 0 18px 50px #0b0820aa;

  /* Mouvement */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --jelly: cubic-bezier(.5, -0.6, .35, 1.8);
}