/* ==========================================================================
   Design token G777jackpot — tre livelli:
   1. Primitivi   valori grezzi (tinte, spazi, raggi, ombre). Non usarli nei componenti.
   2. Semantici   significato (sfondo, testo, primario, accento…) → base.css e temi.
   3. Componente  per singolo componente (--btn-*, --card-*, --cover-*).
   Regola: i componenti leggono solo semantici/componente, mai esadecimali.
   ========================================================================== */

/* --- 1. Primitivi ---------------------------------------------------------- */
:root {
  /* Inchiostro: neutri freddi dal più scuro al più chiaro */
  --ink-975: #07090d;
  --ink-950: #0b0e13;
  --ink-900: #10141b;
  --ink-850: #151a22;
  --ink-800: #1b212b;
  --ink-750: #222935;
  --ink-700: #2b3340;
  --ink-600: #3a4453;
  --ink-400: #8b95a5;
  --ink-300: #a7b0be;
  --ink-100: #e6e9ee;
  --ink-50:  #f4f5f7;

  /* Oro (marchio, soldi, azione principale) */
  --gold-200: #f7dc97;
  --gold-300: #f2cc6f;
  --gold-400: #e8b949;
  --gold-500: #d49f2c;
  --gold-600: #a97a1c;
  --gold-950: #1d1400;

  /* Accenti dei temi */
  --teal-300: #7ad7e5;
  --teal-400: #3fc1d6;
  --teal-600: #2a93a5;
  --teal-950: #051a1e;
  --violet-300: #c3b2fa;
  --violet-400: #a58cf5;
  --violet-600: #7c63d6;
  --violet-950: #140a2e;

  /* Stato */
  --green-400: #3ecf8e;
  --red-400: #f0647a;

  /* Panno da tavolo */
  --felt-700: #185a42;
  --felt-900: #0e3528;

  /* Spazi (base 4px) */
  --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;

  /* Raggi */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 999px;

  /* Tipografia */
  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: clamp(1.9rem, 4.5vw, 2.75rem);

  /* Ombre di elevazione (niente bagliori) */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 16px rgba(0, 0, 0, .28);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, .35), 0 16px 40px rgba(0, 0, 0, .4);
  --highlight: inset 0 1px 0 rgba(255, 255, 255, .05);   /* bordo superiore illuminato */
}

/* --- 2. Semantici ---------------------------------------------------------- */
:root {
  --bg-0: var(--ink-950);
  --bg-1: var(--ink-900);
  --bg-2: var(--ink-850);
  --surface: var(--ink-850);
  --surface-2: var(--ink-800);
  --surface-3: var(--ink-750);
  --border: var(--ink-750);
  --border-strong: var(--ink-600);
  --text: var(--ink-100);
  --text-dim: var(--ink-400);

  /* Azione principale: oro in tutti i temi */
  --primary: var(--gold-400);
  --primary-hi: var(--gold-300);
  --primary-lo: var(--gold-500);
  --on-primary: var(--gold-950);

  --gold: var(--gold-400);
  --gold-rgb: 232, 185, 73;
  --win: var(--green-400);
  --win-rgb: 62, 207, 142;
  --danger: var(--red-400);

  /* Accento (selezione, focus, link): cambia col tema */
  --accent: var(--teal-400);
  --accent-rgb: 63, 193, 214;
  --accent-2: var(--teal-600);
  --accent-2-rgb: 42, 147, 165;
  --on-accent: var(--teal-950);

  /* Compatibilità con i CSS esistenti */
  --glow-sm: 0 0 0 0 transparent;
  --glow: var(--shadow-md);
}
[data-theme="purple"] {
  --accent: var(--violet-400);
  --accent-rgb: 165, 140, 245;
  --accent-2: var(--violet-600);
  --accent-2-rgb: 124, 99, 214;
  --on-accent: var(--violet-950);
}

/* --- 3. Componente --------------------------------------------------------- */
:root {
  /* Pulsanti */
  --btn-radius: var(--radius-sm);
  --btn-bg: linear-gradient(180deg, var(--ink-750), var(--ink-800));
  --btn-bg-hover: linear-gradient(180deg, var(--ink-700), var(--ink-750));
  --btn-border: var(--ink-600);
  --btn-primary-bg: linear-gradient(180deg, var(--gold-300), var(--gold-500));
  --btn-primary-border: var(--gold-600);
  --btn-shadow: var(--highlight), var(--shadow-sm);

  /* Pannelli e card */
  --panel-bg: linear-gradient(180deg, var(--ink-850), var(--ink-900));
  --panel-border: var(--ink-750);
  --panel-shadow: var(--highlight), var(--shadow-md);

  /* Fasce dei livelli giocatore (badge "Liv. N") */
  --tier-bronze: #c98a55;
  --tier-silver: #c3cad5;
  --tier-gold: var(--gold-400);
  --tier-platinum: var(--teal-300);
  --tier-diamond: var(--violet-300);

  /* Avatar */
  --avatar-bg: radial-gradient(circle at 50% 35%, var(--ink-700), var(--ink-900) 70%);
  --avatar-ring: rgba(var(--gold-rgb), .55);

  /* Copertine dei giochi */
  --cover-radius: var(--radius-lg);
  --cover-shadow: var(--shadow-md);
  --cover-shadow-hover: var(--shadow-lg);
}