/* PagPlay — tokens (gerado a partir de tokens.json do styleguide) */
:root,
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a0a0b;
  --surface-1: #141416;
  --surface-2: #1e1e22;
  --glass: rgba(20, 20, 22, 0.72);
  --line: #2c2c33;
  --line-strong: #6b6b76;
  --ink: #f7f7f2;
  --ink-muted: #a3a3ad;
  --yellow-500: #ffd60a;
  --yellow-300: #ffe566;
  --yellow-glow: rgba(255, 214, 10, 0.14);
  --on-yellow: #0a0a0b;
  --highlight-ink: #ffd60a;
  --violet-500: #8b5cff;
  --on-violet: #0a0a0b;
  --violet-soft: rgba(139, 92, 255, 0.18);
  --violet-ink: #b69cff;
  --success: #2ee59d;
  --success-soft: rgba(46, 229, 157, 0.14);
  --danger: #ff5c77;
  --focus: #ffd60a;

  --glow-yellow: 0 0 0 4px rgba(255, 214, 10, 0.18), 0 10px 32px rgba(255, 214, 10, 0.35);
  --glow-violet: 0 0 0 4px rgba(139, 92, 255, 0.22), 0 10px 32px rgba(139, 92, 255, 0.40);
  --elevation: 0 16px 48px rgba(0, 0, 0, 0.55);
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #fafaf5;
  --surface-1: #ffffff;
  --surface-2: #f0f0ea;
  --glass: rgba(255, 255, 255, 0.72);
  --line: #e2e2da;
  --line-strong: #8a8a82;
  --ink: #0a0a0b;
  --ink-muted: #5b5b66;
  --yellow-glow: rgba(255, 214, 10, 0.30);
  --highlight-ink: #7a5c00;
  --violet-500: #6a3df0;
  --on-violet: #ffffff;
  --violet-soft: #ede6ff;
  --violet-ink: #5b2fe0;
  --success: #067a55;
  --success-soft: #ddf7ec;
  --danger: #c81e3a;
  --focus: #6a3df0;

  --glow-yellow: 0 0 0 4px rgba(255, 214, 10, 0.35), 0 10px 24px rgba(122, 92, 0, 0.22);
  --glow-violet: 0 0 0 4px rgba(106, 61, 240, 0.18), 0 10px 24px rgba(106, 61, 240, 0.25);
  --elevation: 0 16px 40px rgba(10, 10, 11, 0.12);
}

:root {
  --font-display: "Unbounded", "Space Grotesk", system-ui, sans-serif;
  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  --container: 1200px;
}