/* =========================================================
   Design System — Liquid Glass Verde/Roxo
   Camada 1: tokens (cores, espaços, raios, sombras, tempos)
   ========================================================= */

:root {
  color-scheme: dark;

  /* --- Marca: verde -> roxo --- */
  --brand-mint: #3ddc97;
  --brand-green: #22c55e;
  --brand-teal: #14b8a6;
  --brand-violet: #8b5cf6;
  --brand-purple: #a855f7;
  --brand-indigo: #6d28d9;

  /* --- Fundo profundo (o vidro precisa de escuro para brilhar) --- */
  --bg-deep: #0b0f1a;
  --bg-deep-2: #101322;
  --bg-veil: rgba(11, 15, 26, 0.55);

  /* --- Superfícies de vidro --- */
  --glass-surface: rgba(255, 255, 255, 0.07);
  --glass-surface-strong: rgba(255, 255, 255, 0.12);
  --glass-surface-soft: rgba(255, 255, 255, 0.045);
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-border-bright: rgba(255, 255, 255, 0.34);
  --glass-specular: rgba(255, 255, 255, 0.55);
  --glass-blur: 18px;
  --glass-blur-strong: 30px;

  /* --- Texto --- */
  --text-primary: #f4f6ff;
  --text-secondary: rgba(244, 246, 255, 0.72);
  --text-muted: rgba(244, 246, 255, 0.5);
  --text-on-accent: #07110c;

  /* --- Estados --- */
  --state-success: #3ddc97;
  --state-warning: #fbbf24;
  --state-danger: #fb7185;
  --state-info: #7dd3fc;

  /* --- Moedas --- */
  --coin-common: #6ee7b7;   /* Gemas de Musgo */
  --coin-premium: #c084fc;  /* Cristais de Aurora */
  --money-real: #fbbf24;    /* dinheiro real — sempre âmbar, nunca disfarçado */

  /* --- Gradientes --- */
  --grad-primary: linear-gradient(135deg, var(--brand-mint) 0%, var(--brand-teal) 38%, var(--brand-violet) 100%);
  --grad-premium: linear-gradient(135deg, var(--brand-purple) 0%, var(--brand-indigo) 100%);
  --grad-text: linear-gradient(120deg, #a7f3d0 0%, #c4b5fd 60%, #f0abfc 100%);

  /* --- Raios --- */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;
  --r-pill: 999px;

  /* --- Espaços --- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 22px;
  --s-6: 30px;
  --s-7: 42px;

  /* --- Sombras --- */
  --shadow-soft: 0 18px 40px -20px rgba(4, 6, 14, 0.9);
  --shadow-lift: 0 26px 60px -24px rgba(4, 6, 14, 0.95);
  --shadow-glow-green: 0 0 34px -6px rgba(61, 220, 151, 0.55);
  --shadow-glow-purple: 0 0 34px -6px rgba(168, 85, 247, 0.55);

  /* --- Movimento --- */
  --ease-liquid: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 140ms;
  --t-med: 260ms;
  --t-slow: 520ms;

  /* --- Tipografia --- */
  --font-display: 'Fredoka', 'Baloo 2', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* --- Base da interface (cartões, chips, barras): referência "Central de jogos" --- */
  --ui-card: linear-gradient(180deg, #151b28 0%, #111623 100%);
  --ui-card-flat: #131926;
  --ui-pill: #141a26;
  --ui-chip: rgba(255, 255, 255, 0.03);
  --ui-line: rgba(255, 255, 255, 0.09);
  --ui-line-strong: rgba(255, 255, 255, 0.16);
  --ui-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --ui-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.9);
  --ui-title: #ffffff;
  --ui-accent: #5ee6a0;
  --ui-accent-grad: linear-gradient(90deg, #6ff0a4 0%, #47d8c6 100%);
  --ui-accent-ink: #06231a;
  --ui-accent-soft: rgba(94, 230, 160, 0.14);
  --ui-tab-active: linear-gradient(90deg, rgba(88, 214, 150, 0.42) 0%, rgba(52, 150, 150, 0.28) 60%, rgba(80, 120, 190, 0.3) 100%);
  --ui-tab-active-line: rgba(160, 250, 215, 0.55);
  --ui-hero: radial-gradient(circle at 76% 60%, rgba(129, 82, 255, 0.55) 0%, transparent 52%),
             linear-gradient(112deg, #0e1c3a 0%, #19235d 42%, #2f2a92 72%, #4a2fb0 100%);
  --ui-hero-line: rgba(92, 176, 255, 0.6);
  --ui-hero-glow: 0 0 0 1px rgba(92, 176, 255, 0.12), 0 18px 44px -22px rgba(76, 90, 255, 0.8);
  --ui-hero-pill: rgba(12, 18, 44, 0.62);
  --ui-hero-text: rgba(236, 240, 255, 0.86);
  --ui-nav: rgba(17, 22, 33, 0.96);
  --ui-nav-active: rgba(255, 255, 255, 0.07);
  --ui-icon-idle: grayscale(1) brightness(1.25) opacity(0.8);
  --ui-trophy: #ffc83d;
}

/* --- Tema claro (opcional, alternável no app) --- */
:root[data-theme='light'] {
  color-scheme: light;
  /* Moedas legíveis sobre vidro claro (as do tema escuro somem no branco). */
  --coin-common: #0f8a5a;
  --coin-premium: #7c3aed;
  --bg-deep: #eef2ff;
  --bg-deep-2: #e6fff5;
  --bg-veil: rgba(255, 255, 255, 0.5);

  --glass-surface: rgba(255, 255, 255, 0.5);
  --glass-surface-strong: rgba(255, 255, 255, 0.68);
  --glass-surface-soft: rgba(255, 255, 255, 0.38);
  --glass-border: rgba(255, 255, 255, 0.85);
  --glass-border-bright: rgba(255, 255, 255, 0.98);

  --text-primary: #141a2e;
  --text-secondary: rgba(20, 26, 46, 0.72);
  --text-muted: rgba(20, 26, 46, 0.5);

  --shadow-soft: 0 18px 40px -22px rgba(76, 29, 149, 0.4);
  --shadow-lift: 0 26px 60px -26px rgba(76, 29, 149, 0.45);

  /* Base da interface no claro: papel branco, linhas finas e o mesmo verde. */
  --ui-card: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
  --ui-card-flat: #ffffff;
  --ui-pill: #ffffff;
  --ui-chip: #f5f7fc;
  --ui-line: rgba(28, 38, 84, 0.09);
  --ui-line-strong: rgba(28, 38, 84, 0.15);
  --ui-inset: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --ui-shadow: 0 12px 28px -18px rgba(52, 44, 140, 0.35);
  --ui-title: #111831;
  --ui-accent: #0d9a61;
  --ui-accent-soft: rgba(13, 154, 97, 0.1);
  --ui-tab-active: linear-gradient(90deg, #7ff0b4 0%, #6fdcd0 60%, #9ec0ff 100%);
  --ui-tab-active-line: rgba(255, 255, 255, 0.95);
  --ui-hero: radial-gradient(circle at 76% 60%, rgba(160, 120, 255, 0.4) 0%, transparent 52%),
             linear-gradient(112deg, #eaf1ff 0%, #e2e6ff 42%, #dcd2ff 72%, #cfbcff 100%);
  --ui-hero-line: rgba(118, 132, 255, 0.45);
  --ui-hero-glow: 0 18px 40px -24px rgba(90, 80, 220, 0.55);
  --ui-hero-pill: rgba(255, 255, 255, 0.75);
  --ui-hero-text: rgba(28, 34, 72, 0.78);
  --ui-nav: rgba(255, 255, 255, 0.97);
  --ui-nav-active: #eef1fa;
  --ui-icon-idle: grayscale(1) opacity(0.6);
  --ui-trophy: #e39a00;
}

/* --- Tema "Mundo Colorido" (infantil): céu pastel, cartões de papel e
       botões fofinhos. Os componentes ganham ajustes em theme-kids.css. --- */
:root[data-theme='kids'] {
  color-scheme: light;

  /* Paleta de brinquedo */
  --kid-ink: #2b1d4e;
  --kid-cream: #fffaf3;
  --kid-card-border: #f6dce8;
  --kid-edge: #e2cdf0;
  --kid-green: #2bcf6f;
  --kid-green-dark: #13a456;
  --kid-pink: #ff8ec7;
  --kid-cyan: #4fdcf2;
  --kid-blue: #6cb6ff;
  --kid-purple: #b98bff;
  --kid-yellow: #ffd84a;
  --kid-orange: #ffae5c;
  --kid-sky-top: #e6d8ff;
  --kid-sky-mid: #d3e1ff;
  --kid-sky-bottom: #c4ecff;

  --brand-mint: #2bcf6f;
  --brand-green: #22c55e;
  --brand-teal: #2ec5e6;
  --brand-violet: #9b6bff;
  --brand-purple: #b667ff;
  --brand-indigo: #7c3aed;

  --bg-deep: #dcd6ff;
  --bg-deep-2: #cfe6ff;
  --bg-veil: rgba(214, 200, 255, 0.55);

  --glass-surface: rgba(255, 250, 243, 0.94);
  --glass-surface-strong: #fff;
  --glass-surface-soft: rgba(255, 250, 243, 0.82);
  --glass-border: var(--kid-card-border);
  --glass-border-bright: #f1b8d6;
  --glass-specular: rgba(255, 255, 255, 0.8);
  --glass-blur: 6px;
  --glass-blur-strong: 10px;

  --text-primary: var(--kid-ink);
  --text-secondary: rgba(43, 29, 78, 0.76);
  --text-muted: rgba(43, 29, 78, 0.55);
  --text-on-accent: #fff;

  --state-success: #16a34a;
  --state-warning: #e08a00;
  --state-danger: #f0457a;
  --state-info: #1c8ee8;

  --coin-common: #1d9e52;
  --coin-premium: #8b3fe0;
  --money-real: #d97706;

  --grad-primary: linear-gradient(180deg, #45e08a 0%, var(--kid-green) 55%, #1fbd62 100%);
  --grad-premium: linear-gradient(180deg, #ff9fd2 0%, #c77dff 100%);
  --grad-text: linear-gradient(180deg, #ffe46b 0%, #ffc531 100%);

  --r-sm: 14px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-xl: 36px;

  --shadow-soft: 0 5px 0 var(--kid-edge), 0 16px 28px -14px rgba(108, 76, 180, 0.45);
  --shadow-lift: 0 7px 0 var(--kid-edge), 0 22px 34px -16px rgba(108, 76, 180, 0.5);
  --shadow-glow-green: 0 4px 0 var(--kid-green-dark);
  --shadow-glow-purple: 0 4px 0 #9a55e6;

  /* Base da interface: o tema infantil reaproveita o papel creme. */
  --ui-card: var(--kid-cream);
  --ui-card-flat: var(--kid-cream);
  --ui-pill: #fff;
  --ui-chip: #fff;
  --ui-line: var(--kid-card-border);
  --ui-line-strong: #e7ddf7;
  --ui-inset: none;
  --ui-shadow: var(--shadow-soft);
  --ui-title: var(--kid-ink);
  --ui-accent: #d9337f;
  --ui-accent-grad: var(--grad-primary);
  --ui-accent-ink: #fff;
  --ui-accent-soft: #dcfbe8;
  --ui-nav: rgba(255, 255, 255, 0.96);
  --ui-nav-active: #f3ecff;
  --ui-icon-idle: none;
  --ui-trophy: #c26a00;
  --ui-hero-pill: rgba(255, 255, 255, 0.92);
  --ui-hero-text: #3d2a66;

  /* Superfícies do Mundo Colorido (theme-kids.css usa só estes nomes, para a
     versão Noite trocar a paleta sem repetir as regras). */
  --kid-paper: #fff;
  --kid-paper-soft: rgba(255, 255, 255, 0.6);
  --kid-paper-glass: rgba(255, 255, 255, 0.96);
  --kid-outline: #fff;
  --kid-pill-border: #e7ddf7;
  --kid-mix: #fff;
  --kid-on-color: #2b1d4e;
  --kid-ink-2: rgba(43, 29, 78, 0.76);
  --kid-ink-3: rgba(43, 29, 78, 0.55);
  --kid-ink-nav: #6c5c96;
  --kid-halo: #fff;
  --kid-track: #f1eafe;
  --kid-track-line: #e2d5fb;
  --kid-badge-line: rgba(43, 29, 78, 0.14);
  --kid-nav-active: linear-gradient(180deg, #f3ecff, #e4d8ff);
  --kid-hero: linear-gradient(135deg, #cdb6ff 0%, #ffb3dc 55%, #ffd6a6 100%);
  --kid-hero-edge: #c9a9f0;
  --kid-hero-ink: #3d2a66;
  --kid-veil: rgba(200, 182, 255, 0.55);
  --kid-ok-ink: #0f7a3d;
  --kid-ok-bg: #e3fbec;
  --kid-ok-line: #9fe8bd;
  --kid-warn-bg: #fff6d6;
  --kid-danger-bg: #ffe6f1;
  --kid-cloud-opacity: 0.85;
}

/* --- Tema "Mundo Colorido Noite": a mesma identidade (cartões de papel com
       borda grossa, botões de brinquedo com degrau, giz de cera) sob um céu
       de noite estrelada. O app marca data-theme="kids" e data-mode="night":
       valem todas as regras do Mundo Colorido, só a paleta muda aqui. --- */
:root[data-theme='kids'][data-mode='night'] {
  color-scheme: dark;

  --kid-ink: #f3ecff;
  --kid-cream: #2a2150;
  --kid-card-border: #4a3b82;
  --kid-edge: #17112f;
  --kid-green: #34d47a;
  --kid-green-dark: #128a48;
  --kid-pink: #ff7cbd;
  --kid-cyan: #3fd0ea;
  --kid-blue: #5aa8ff;
  --kid-purple: #a98bff;
  --kid-yellow: #ffd24a;
  --kid-orange: #ffa552;
  --kid-sky-top: #120b2e;
  --kid-sky-mid: #1d1650;
  --kid-sky-bottom: #10284d;

  --brand-violet: #a98bff;
  --brand-purple: #c98bff;

  --bg-deep: #120b2e;
  --bg-deep-2: #10284d;
  --bg-veil: rgba(18, 11, 46, 0.6);

  --glass-surface: rgba(42, 33, 80, 0.95);
  --glass-surface-strong: #32286a;
  --glass-surface-soft: rgba(42, 33, 80, 0.82);
  --glass-border-bright: #7a5fd0;
  --glass-specular: rgba(255, 255, 255, 0.12);

  --text-secondary: rgba(243, 236, 255, 0.78);
  --text-muted: rgba(243, 236, 255, 0.56);

  --state-success: #3ddc84;
  --state-warning: #ffb547;
  --state-danger: #ff6b9a;
  --state-info: #5fb6ff;

  --coin-common: #4ee08f;
  --coin-premium: #d39bff;
  --money-real: #ffb547;

  --shadow-soft: 0 5px 0 var(--kid-edge), 0 16px 28px -14px rgba(0, 0, 0, 0.6);
  --shadow-lift: 0 7px 0 var(--kid-edge), 0 22px 34px -16px rgba(0, 0, 0, 0.65);

  --ui-pill: #32286a;
  --ui-chip: #32286a;
  --ui-line-strong: #5a4a9a;
  --ui-accent: #ff7cbd;
  --ui-accent-soft: #1f4a37;
  --ui-nav: rgba(30, 23, 64, 0.97);
  --ui-nav-active: #3a2f78;
  --ui-trophy: #ffc247;
  --ui-hero-pill: rgba(42, 33, 80, 0.92);
  --ui-hero-text: #efe6ff;

  --kid-paper: #32286a;
  --kid-paper-soft: rgba(50, 40, 106, 0.7);
  --kid-paper-glass: rgba(30, 23, 64, 0.96);
  --kid-outline: #4f3f95;
  --kid-pill-border: #4a3b82;
  --kid-mix: #1e1740;
  --kid-on-color: #241845;
  --kid-ink-2: rgba(243, 236, 255, 0.78);
  --kid-ink-3: rgba(243, 236, 255, 0.56);
  --kid-ink-nav: #b9a8e8;
  --kid-halo: #120b2e;
  --kid-track: #1c1542;
  --kid-track-line: #3d3175;
  --kid-badge-line: rgba(0, 0, 0, 0.28);
  --kid-nav-active: linear-gradient(180deg, #44378a, #352a72);
  --kid-hero: radial-gradient(circle at 80% 18%, rgba(255, 230, 140, 0.9) 0 7%, transparent 8%),
              linear-gradient(135deg, #3a2a8c 0%, #6a2f8f 55%, #8a4a6a 100%);
  --kid-hero-edge: #17112f;
  --kid-hero-ink: #f3ecff;
  --kid-veil: rgba(8, 5, 24, 0.7);
  --kid-ok-ink: #7ff0b0;
  --kid-ok-bg: #173b2c;
  --kid-ok-line: #2d7a54;
  --kid-warn-bg: #3d3014;
  --kid-danger-bg: #42173a;
  --kid-cloud-opacity: 0.08;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t-med: 0ms;
    --t-slow: 0ms;
  }
}