/* ==========================================================================
   SaikoNoShop — Design tokens (Pixelmon Quest Board) v1.2.0
   Miroir de design/design-system.json : nom CSS = chemin JSON en kebab-case.
   Ne pas éditer une valeur ici sans l'éditer dans le JSON.
   Polices : auto-hébergées, à charger via src/fonts/fonts.css (aucun appel à Google Fonts)
   Breakpoints (non utilisables dans @media, documentés ici) :
   mobile 480px, tablet 768px, desktop 1200px
   ========================================================================== */

:root {
  /* ---- Pierre / deepslate (fond de page) ---- */
  --color-stone-900: #1e1e22;
  --color-stone-800: #2b2b2f;
  --color-stone-700: #3a3a40;
  --color-stone-600: #4a4a52;

  /* ---- Chêne (planches du tableau) ---- */
  --color-oak-dark: #6b5232;
  --color-oak-base: #9c7f4e;
  --color-oak-light: #b8945f;
  --color-oak-highlight: #d9b97f;

  /* ---- Chêne noir (cadre) ---- */
  --color-dark-oak-900: #2a1a0b;
  --color-dark-oak-800: #3e2912;
  --color-dark-oak-700: #4f3618;

  /* ---- Parchemin (fiches Pokémon) ---- */
  --color-parchment-light: #f2e9cc;
  --color-parchment-base: #e8dcb5;
  --color-parchment-dark: #d4c393;
  --color-parchment-edge: #b5a273;
  --color-parchment-ink: #3b2a14;
  --color-parchment-ink-muted: #5c4a2e;

  /* ---- Punaise ---- */
  --color-pin-head: #c0392b;
  --color-pin-shine: #ff8a7a;
  --color-pin-shadow: #5a120c;

  /* ---- Infobulle d'objet Minecraft ---- */
  --color-tooltip-bg: rgba(16, 0, 16, 0.94);
  --color-tooltip-border-top: #5000ff;
  --color-tooltip-border-bottom: #28007f;
  --color-tooltip-text: #ffffff;
  --color-tooltip-text-muted: #aaaaaa;

  /* ---- GUI Minecraft / PC Plus ---- */
  --color-gui-bg: #c6c6c6;
  --color-gui-bg-inset: #8b8b8b;
  --color-gui-bevel-light: #ffffff;
  --color-gui-bevel-dark: #555555;
  --color-gui-outline: #000000;
  --color-gui-text: #3f3f3f;
  --color-gui-text-strong: #1e1e22;

  /* ---- Bouton pierre ---- */
  --color-button-bg: #6f6f6f;
  --color-button-bevel-light: #aaaaaa;
  --color-button-bevel-dark: #4a4a4a;
  --color-button-text: #ffffff;
  --color-button-hover-bg: #5b6aa8;
  --color-button-hover-border: #ffffff;
  --color-button-hover-text: #ffffa0;
  --color-button-active-bg: #4a4a52;
  --color-button-disabled-bg: #4a4a4a;
  --color-button-disabled-text: #a0a0a0;

  /* ---- Texte ---- */
  --color-text-on-dark: #ffffff;
  --color-text-on-dark-muted: #b3b3bb;
  --color-text-on-wood: #2a1a0b;       /* sur oak-light ; oak-base = texte large seulement */
  --color-text-on-wood-dark: #f2e9cc;  /* sur oak-dark / dark-oak */

  /* ---- Sémantique (*-on-light = sur parchemin) ---- */
  --color-semantic-hidden-ability: #ffaa00;
  --color-semantic-hidden-ability-on-light: #7a4f00;
  --color-semantic-shiny: #ffd700;
  --color-semantic-shiny-on-light: #6e5400;
  --color-semantic-price-on-dark: #55ff55;
  --color-semantic-price-on-light: #0b6b2f;
  --color-semantic-sold: #aa0000;
  --color-semantic-sold-on-dark: #ff5555;
  --color-semantic-sold-stamp-text: #ffffff;

  /* ---- Statut RÉSERVÉ (étiquette ambre, distincte du tampon rouge VENDU) ---- */
  --color-reserved-bg: #f08c1a;
  --color-reserved-text: #2a1400;
  --color-reserved-border: #5a2e00;

  /* ---- Admin : formulaires (champ texte façon Minecraft, posé sur gui-bg) ---- */
  --color-input-bg: #000000;
  --color-input-text: #e0e0e0;
  --color-input-border: #a0a0a0;
  --color-input-border-focus: #ffff55;
  --color-input-invalid: #ff5555;
  --color-field-error-text: #8b0000;  /* sur gui-bg */

  /* ---- Admin : messages ---- */
  --color-toast-success-bg: #1f6b30;
  --color-toast-success-text: #ffffff;
  --color-toast-error-bg: #aa0000;
  --color-toast-error-text: #ffffff;
  --color-toast-info-bg: #28007f;
  --color-toast-info-text: #ffffff;

  /* ---- Admin : boutons danger (Supprimer) et principal (Publier) ---- */
  --color-button-danger-bg: #aa0000;
  --color-button-danger-text: #ffffff;
  --color-button-danger-hover-bg: #cc2a2a;
  --color-button-primary-bg: #1f6b30;
  --color-button-primary-text: #ffffff;
  --color-button-primary-hover-bg: #1f7a3a;

  /* ---- Badge talent caché (sombre, texte or ; posé sur parchemin ou fond sombre) ---- */
  --color-hidden-ability-badge-bg: #1c0b17;
  --color-hidden-ability-badge-text: #ffd700;
  --color-hidden-ability-badge-border: #ffaa00;

  /* ---- Genre (pastille ; bordure gui-outline) ---- */
  --color-gender-male-bg: #2f5fc4;
  --color-gender-male-text: #ffffff;
  --color-gender-female-bg: #c2306b;
  --color-gender-female-text: #ffffff;

  /* ---- Fallback de sprite (silhouette ou Poké Ball) ---- */
  --color-sprite-fallback-silhouette: #5c4a2e;
  --color-sprite-fallback-ball-top: #cc2a2a;
  --color-sprite-fallback-ball-bottom: #f2e9cc;
  --color-sprite-fallback-ball-band: #1e1e22;
  --color-sprite-fallback-ball-button: #ffffff;

  /* ---- Focus (double anneau) ---- */
  --color-focus-ring: #ffff55;
  --color-focus-ring-contrast: #000000;

  /* ---- Overlay ---- */
  --color-overlay-backdrop: rgba(10, 6, 2, 0.72);

  /* ---- Types Pokémon (fond du badge + texte) ---- */
  --type-normal: #a8a77a;   --type-normal-text: #1e1e22;
  --type-fire: #ee8130;     --type-fire-text: #1e1e22;
  --type-water: #6390f0;    --type-water-text: #1e1e22;
  --type-grass: #7ac74c;    --type-grass-text: #1e1e22;
  --type-electric: #f7d02c; --type-electric-text: #1e1e22;
  --type-ice: #96d9d6;      --type-ice-text: #1e1e22;
  --type-fighting: #c22e28; --type-fighting-text: #ffffff;
  --type-poison: #a33ea1;   --type-poison-text: #ffffff;
  --type-ground: #e2bf65;   --type-ground-text: #1e1e22;
  --type-flying: #a98ff3;   --type-flying-text: #1e1e22;
  --type-psychic: #f95587;  --type-psychic-text: #1e1e22;
  --type-bug: #a6b91a;      --type-bug-text: #1e1e22;
  --type-rock: #b6a136;     --type-rock-text: #1e1e22;
  --type-ghost: #735797;    --type-ghost-text: #ffffff;
  --type-dragon: #6f35fc;   --type-dragon-text: #ffffff;
  --type-dark: #705746;     --type-dark-text: #ffffff;
  --type-steel: #b7b7ce;    --type-steel-text: #1e1e22;
  --type-fairy: #d685ad;    --type-fairy-text: #1e1e22;

  /* ---- Raretés PixelmonWorld (fond clair + texte très foncé ; bordure = texte, visible sur parchemin) ---- */
  --rarity-commun-bg: #c6c6c6;      --rarity-commun-text: #262626;
  --rarity-peu-commun-bg: #7cb777;  --rarity-peu-commun-text: #002300;
  --rarity-rare-bg: #6fa8dc;        --rarity-rare-text: #00213d;
  --rarity-epique-bg: #b48ae0;      --rarity-epique-text: #240046;
  --rarity-legendaire-bg: #ffc832;  --rarity-legendaire-text: #3d2600;

  /* ---- Stats (PC Plus) ---- */
  --stat-hp: #ff5959;
  --stat-atk: #f5ac78;
  --stat-def: #fae078;
  --stat-spa: #9db7f5;
  --stat-spd: #a7db8d;
  --stat-spe: #fa92b2;
  --stat-track: #373737;

  /* ---- Dégradés (textures bois / pierre / parchemin en CSS pur) ---- */
  --wood-planks: repeating-linear-gradient(180deg, #b8945f 0, #9c7f4e 4px, #9c7f4e 28px, #6b5232 28px, #2a1a0b 32px);
  --wood-grain: repeating-linear-gradient(90deg, rgba(42, 26, 11, 0) 0, rgba(42, 26, 11, 0) 44px, rgba(42, 26, 11, 0.18) 44px, rgba(42, 26, 11, 0.18) 48px);
  --dark-oak-frame: repeating-linear-gradient(90deg, #3e2912 0, #3e2912 12px, #4f3618 12px, #4f3618 16px);
  --stone-bg: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0.25) 16px, rgba(0, 0, 0, 0.25) 20px), repeating-linear-gradient(90deg, #1e1e22 0, #1e1e22 20px, #2b2b2f 20px, #2b2b2f 24px, #1e1e22 24px, #1e1e22 40px, #3a3a40 40px, #3a3a40 44px);
  --parchment: linear-gradient(180deg, #f2e9cc 0%, #e8dcb5 55%, #d4c393 100%);
  --tooltip-border: linear-gradient(180deg, #5000ff 0%, #28007f 100%);
  --stat-bar-shine: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0, rgba(255, 255, 255, 0.35) 2px, rgba(0, 0, 0, 0) 2px);

  /* ---- Typographie ---- */
  --font-display: 'Pixelify Sans', 'Silkscreen', monospace;
  --font-label: 'Silkscreen', 'Pixelify Sans', monospace;
  --font-body: 'VT323', 'Courier New', monospace;
  --font-price: 'Jersey 10', 'VT323', monospace;  /* 0-9, 5/S distincts */
  --font-name: 'Jersey 10', 'VT323', monospace;   /* C/O, G/6 distincts */

  --text-xs: 1rem;      --leading-xs: 1.25rem;
  --text-sm: 1.125rem;  --leading-sm: 1.5rem;
  --text-base: 1.25rem; --leading-base: 1.5rem;
  --text-lg: 1.5rem;    --leading-lg: 1.75rem;
  --text-xl: 1.75rem;   --leading-xl: 2rem;
  --text-2xl: 2rem;     --leading-2xl: 2.5rem;
  --text-3xl: 2.5rem;   --leading-3xl: 3rem;
  --text-4xl: 3rem;     --leading-4xl: 3.5rem;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --letter-spacing-tight: 0;
  --letter-spacing-label: 0.05em;
  --letter-spacing-wide: 0.1em;

  --text-shadow-minecraft: 2px 2px 0 #3f3f3f;
  --text-shadow-on-dark: 2px 2px 0 #000000;
  --text-shadow-on-wood: 1px 1px 0 #d9b97f;

  /* ---- Espacements (multiples de 4px) ---- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---- Bordures (pixel : radius toujours 0) ---- */
  --radius-none: 0;
  --border-pixel: 2px;
  --border-bevel: 3px;
  --border-frame: 12px;

  /* ---- Ombres dures (aucun flou) ---- */
  --shadow-hard-sm: 2px 2px 0 rgba(0, 0, 0, 0.45);
  --shadow-hard-md: 4px 4px 0 rgba(0, 0, 0, 0.45);
  --shadow-hard-lg: 8px 8px 0 rgba(0, 0, 0, 0.5);
  --shadow-card: 3px 4px 0 rgba(42, 26, 11, 0.55);
  --shadow-gui-bevel: inset 3px 3px 0 #ffffff, inset -3px -3px 0 #555555;
  --shadow-gui-inset: inset 3px 3px 0 #555555, inset -3px -3px 0 #ffffff;
  --shadow-button-bevel: inset 2px 2px 0 #aaaaaa, inset -2px -2px 0 #4a4a4a;
  --shadow-button-pressed: inset 2px 2px 0 #4a4a4a, inset -2px -2px 0 #aaaaaa;
  --shadow-frame-inner: inset 0 0 0 4px #2a1a0b;
  --shadow-focus: 0 0 0 2px #000000, 0 0 0 4px #ffff55;

  /* ---- Breakpoints (référence pour JS / container queries) ---- */
  --breakpoint-mobile: 480px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1200px;

  /* ---- Z-index ---- */
  --z-base: 0;
  --z-card: 10;
  --z-card-raised: 20;
  --z-header: 100;
  --z-overlay: 900;
  --z-modal: 1000;
  --z-tooltip: 1100;

  /* ---- Animation ---- */
  --duration-instant: 80ms;
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --ease-step: steps(4, end);
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* ---- Effets des fiches ---- */
  --card-tilt-max: 1.5deg;            /* rotation max ± (calculée en JS dans [-max, max]) */
  --stamp-rotate: -18deg;
  --sold-desaturate: grayscale(0.7);  /* valeur de filter */

  /* ---- Layout ---- */
  --container-max: 1200px;
  --card-width: 240px;
  --tooltip-max-width: 320px;
  --pin-size: 12px;

  /* ---- Accessibilité ---- */
  --touch-target-min: 44px;
  --font-size-min: 16px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}