/* tokens.css — copiado do Design System da Intranet Tutiplast (versão 05/11/2026).
   No fim do arquivo ficam os tokens específicos do jogo, definidos nos dois temas. */
:root {
  /* Marca */
  --color-brand-primary: #2d6a05;
  --color-brand-accent: #40d900;
  --color-brand-subtle: #4baf08;
  --color-brand-border: #86efac;

  /* Superfícies */
  --color-surface-topbar-info: var(--color-brand-primary);
  --color-surface-topbar-brand: #ffffff;
  --color-surface-topbar-brand-darker: #e8e6e6;
  --color-surface-nav-services: #5f5e5e;
  --color-surface-nav-main: #2e3132;
  --color-surface-page: #f8f9fa;
  --color-surface-footer: #1c1e1f;
  --color-surface-card: #ffffff;
  --color-border-card: #e5e7eb;
  --color-border-card-strong: var(--color-brand-primary);
  --radius-card: 10px;
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);

  /* Texto */
  --color-text-heading: #1a1a1a;
  --color-text-body: #4b5563;
  --color-text-muted: #6b7280;
  --color-text-on-dark: #f3f4f6;
  --color-text-on-dark-muted: #d1d5db;

  /* Semânticas */
  --color-danger: #dc2626;
  --color-danger-text: #b91c1c;
  --color-danger-bg: #fef2f2;
  --color-danger-border: #fecaca;
  --color-info-text: #1d4ed8;
  --color-info-bg: #dbeafe;
  --color-warning-text: #b45309;
  --color-surface-tooltip: #1a1a1a;
  --color-badge-noticia: #000000;
  --color-badge-default: #4b5563;

  /* Tipografia */
  --font-family-base: "Inter", sans-serif;
  --font-display-banner: 700 48px/1.2 var(--font-family-base);
  --font-display-title: 700 45px/1.2 var(--font-family-base);
  --font-heading-section: 700 32px/1.3 var(--font-family-base);
  --font-heading-card: 600 24px/1.3 var(--font-family-base);
  --font-body-lead: 400 18px/1.5 var(--font-family-base);
  --font-body-regular: 400 16px/1.5 var(--font-family-base);
  --font-label-bold: 700 16px/1.4 var(--font-family-base);
  --font-description-bold: 700 12px/1.4 var(--font-family-base);

  /* Carregamento */
  --color-skeleton-base: #e9ecef;
  --color-skeleton-highlight: #f6f7f8;

  /* Espaçamento e layout */
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --content-max-width: 1200px;
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --color-brand-primary: #4a9a1a;
  --color-brand-border: #2f6b12;
  --color-surface-topbar-info: #234f07;
  --color-surface-topbar-brand: #1c1f22;
  --color-surface-topbar-brand-darker: #2a2e32;
  --color-surface-page: #121416;
  --color-surface-footer: #0b0c0d;
  --color-surface-card: #1c1f22;
  --color-border-card: #2f3338;
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
  --color-text-heading: #f1f3f5;
  --color-text-body: #c9ced4;
  --color-text-muted: #9aa1a9;
  --color-danger: #f87171;
  --color-danger-text: #fca5a5;
  --color-danger-bg: #3a1a1a;
  --color-danger-border: #7f1d1d;
  --color-info-text: #93c5fd;
  --color-info-bg: #1e2a44;
  --color-warning-text: #fbbf24;
  --color-surface-tooltip: #3a3f45;
  --color-skeleton-base: #24282c;
  --color-skeleton-highlight: #2e3338;
}

@media (max-width: 600px) {
  :root {
    --font-display-banner: 700 32px/1.2 var(--font-family-base);
    --font-display-title: 700 28px/1.2 var(--font-family-base);
    --font-heading-section: 700 24px/1.3 var(--font-family-base);
    --font-heading-card: 600 20px/1.3 var(--font-family-base);
    --font-body-lead: 400 16px/1.5 var(--font-family-base);
  }
}

/* ---------- Tokens do jogo (novos, nos dois temas) ---------- */
:root {
  /* Verso da carta: fundo escuro fixo para a logo Tutiplast (versão p/ fundo escuro) */
  --color-text-on-brand: #ffffff; /* texto sobre botão/selo verde */
  --color-card-back: #1c1e1f;
  --color-card-back-pattern: rgba(255, 255, 255, 0.04);
  --color-overlay: rgba(15, 23, 42, 0.45);
  --shadow-hover: 0 6px 14px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-modal: 0 24px 60px rgba(0, 0, 0, 0.28);
  --radius-modal: 16px;
  --radius-toast: 12px;
  --radius-field: 6px;
  --radius-button: 4px;
  --radius-pill: 999px;
  --transition-color: 0.15s ease;
  --transition-move: 0.2s ease;
  --transition-flip: 0.3s ease;

  /* Confetes ao terminar o jogo (mesmas cores nos dois temas) */
  --color-confete-1: #40d900;
  --color-confete-2: #2d6a05;
  --color-confete-3: #86efac;
  --color-confete-4: #4baf08;
  --color-confete-5: #3b82f6;
  --color-confete-6: #f59e0b;
  --color-confete-7: #ef4444;
  --color-confete-8: #a855f7;
  /* Confetes dourados (top 3) */
  --color-confete-ouro-1: #ffd700;
  --color-confete-ouro-2: #f5c518;
  --color-confete-ouro-3: #d4a017;
  --color-confete-ouro-4: #b8860b;
  --color-confete-ouro-5: #ffe680;
  --color-confete-ouro-6: #fff4c2;
  --color-ouro-borda: #d4a017;
  --color-ouro-texto: #8a6100;
}

:root[data-theme='dark'] {
  --color-card-back: #0b0c0d;
  --color-card-back-pattern: rgba(255, 255, 255, 0.05);
  --color-overlay: rgba(0, 0, 0, 0.6);
  --shadow-hover: 0 6px 14px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-modal: 0 24px 60px rgba(0, 0, 0, 0.6);
  --color-ouro-texto: #f5c518;
}

body {
  min-height: 100vh;
  color: var(--color-text-body);
  background: var(--color-surface-page);
  line-height: 1.6;
  font-family: var(--font-family-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}