:root {
  /* =========================================================
     PokéRank Design Tokens v1.0
     I componenti devono usare questi token, non valori isolati.
     ========================================================= */

  /* Fondali */
  --pk-bg: #10151d;
  --pk-bg-soft: #151c27;
  --pk-bg-elevated: #1a2230;
  --pk-overlay: rgba(7, 10, 15, 0.76);

  /* Superfici */
  --pk-panel: #1b2330;
  --pk-panel-light: #263142;
  --pk-panel-dark: #0f141c;
  --pk-surface-hover: #2d394c;
  --pk-surface-active: #334159;

  /* Colori principali */
  --pk-gold: #ffd54f;
  --pk-blue: #7be9ff;
  --pk-red: #ff6464;
  --pk-green: #6dff9b;
  --pk-purple: #b97bff;
  --pk-bronze: #cd7f32;
  --pk-silver: #d9e0e5;

  /* Colori semantici */
  --pk-primary: var(--pk-blue);
  --pk-accent: var(--pk-gold);
  --pk-success: var(--pk-green);
  --pk-danger: var(--pk-red);
  --pk-info: var(--pk-blue);
  --pk-supporter: var(--pk-purple);
  --pk-warning: #ffb84d;

  /* Testo */
  --pk-text: #eef4ff;
  --pk-text-inverse: #10151d;
  --pk-muted: #95a4ba;
  --pk-faint: #6f7c90;
  --pk-disabled: #566276;

  /* Bordi */
  --pk-border: rgba(255, 255, 255, 0.12);
  --pk-border-strong: rgba(255, 255, 255, 0.2);
  --pk-border-focus: rgba(123, 233, 255, 0.72);

  /* Tipografia */
  --pk-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --pk-font-xs: 10px;
  --pk-font-sm: 11px;
  --pk-font-md: 13px;
  --pk-font-lg: 16px;
  --pk-font-xl: 22px;
  --pk-font-hero: 24px;

  --pk-line-tight: 1.15;
  --pk-line-normal: 1.4;
  --pk-line-relaxed: 1.55;

  --pk-weight-regular: 400;
  --pk-weight-medium: 600;
  --pk-weight-bold: 800;
  --pk-weight-black: 900;

  /* Spaziatura */
  --pk-space-2xs: 2px;
  --pk-space-xs: 4px;
  --pk-space-sm: 8px;
  --pk-space-md: 12px;
  --pk-space-lg: 18px;
  --pk-space-xl: 24px;
  --pk-space-2xl: 32px;

  /* Raggi */
  --pk-radius-xs: 6px;
  --pk-radius-sm: 8px;
  --pk-radius-md: 12px;
  --pk-radius-lg: 18px;
  --pk-radius-xl: 24px;
  --pk-radius-pill: 999px;

  /* Ombre */
  --pk-shadow-xs: 0 3px 8px rgba(0, 0, 0, 0.18);
  --pk-shadow-soft: 0 8px 20px rgba(0, 0, 0, 0.25);
  --pk-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  --pk-shadow-strong: 0 18px 42px rgba(0, 0, 0, 0.46);

  /* Glow */
  --pk-glow-blue: 0 0 18px rgba(123, 233, 255, 0.34);
  --pk-glow-gold: 0 0 20px rgba(255, 213, 79, 0.34);
  --pk-glow-red: 0 0 18px rgba(255, 100, 100, 0.32);
  --pk-glow-green: 0 0 18px rgba(109, 255, 155, 0.32);
  --pk-glow-purple: 0 0 20px rgba(185, 123, 255, 0.34);

  /* Animazioni */
  --pk-speed-instant: 0.08s;
  --pk-speed-fast: 0.15s;
  --pk-speed-normal: 0.25s;
  --pk-speed-slow: 0.4s;
  --pk-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --pk-ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Dimensioni condivise */
  --pk-avatar-xs: 24px;
  --pk-avatar-sm: 32px;
  --pk-avatar-md: 44px;
  --pk-avatar-lg: 60px;
  --pk-avatar-xl: 76px;
  --pk-control-height: 40px;
  --pk-icon-sm: 14px;
  --pk-icon-md: 18px;
  --pk-icon-lg: 24px;

  /* Livelli di sovrapposizione */
  --pk-z-base: 0;
  --pk-z-raised: 10;
  --pk-z-sticky: 100;
  --pk-z-overlay: 500;
  --pk-z-modal: 1000;
  --pk-z-toast: 1200;

  /* Rarità Carta Allenatore */
  --pk-rarity-common: #a8b1bf;
  --pk-rarity-uncommon: #6dff9b;
  --pk-rarity-rare: #7be9ff;
  --pk-rarity-epic: #b97bff;
  --pk-rarity-legendary: #ffd54f;
  --pk-rarity-mythic: #ff78c8;

  /* Cornici Carta Allenatore */
  --pk-frame-bronze: #cd7f32;
  --pk-frame-silver: #d9e0e5;
  --pk-frame-gold: #ffd54f;
  --pk-frame-diamond: #7be9ff;
  --pk-frame-mythic: #b97bff;
  --pk-frame-champion: #ffb84d;

  /* Bonus e affinità */
  --pk-bonus-follower: #ff6464;
  --pk-bonus-subscriber: #b97bff;
  --pk-bonus-shop: #b97bff;
  --pk-bonus-community: #7be9ff;
  --pk-bonus-event: #ffd54f;
}



/* === PokéRank Mobile Patch (safe) === */
@media (max-width:480px){
html,body{width:100%;max-width:100%;overflow-x:hidden;}
body{margin:0;}
.app,.container,#app,main{
  width:100%!important;
  max-width:100%!important;
  min-height:100dvh;
}
header,.header{
  padding:8px 12px!important;
}
.card{
  margin:8px!important;
  padding:10px!important;
}
.bottom-nav,.navbar,.nav-bottom{
  padding:4px 0!important;
}
.bottom-nav .label,.nav-bottom .label{
  font-size:10px;
}
img.avatar,.avatar{
  max-width:56px!important;
  max-height:56px!important;
}
}