/* Tokens de design do Bubble Simulator. Fonte única: doc/DESIGN.md.
   Escuro é o padrão; claro pelo sistema ou por html[data-theme="light"]. */
:root {
  color-scheme: dark;
  --bg: #0a0a0a;
  --bg-subtle: #111111;
  --surface: #141414;
  --surface-2: #1a1a1a;
  --surface-3: #222222;
  --border: #242424;
  --border-strong: #333333;
  --text: #ededed;
  --text-2: #a1a1a1;
  --muted: #737373;
  --primary: #ededed;
  --primary-fg: #0a0a0a;
  --primary-hover: #ffffff;
  --accent: #3b82f6;
  --accent-soft: rgba(59, 130, 246, .14);
  --success: #3fb950;
  --warning: #d29922;
  --danger: #f85149;
  --danger-soft: rgba(248, 81, 73, .12);
  --focus: #3b82f6;
  --overlay: rgba(0, 0, 0, .6);
  --shadow-pop: 0 8px 30px rgba(0, 0, 0, .5), 0 0 0 1px var(--border);
  --stage: #050505;
  --checker-a: #1a1a1a;
  --checker-b: #111111;

  --font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 16px; --fs-lg: 20px; --fs-xl: 24px; --fs-2xl: 32px; --fs-3xl: 48px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px;
  --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-full: 999px;
  --dur-1: 120ms; --dur-2: 200ms; --ease: cubic-bezier(.2, .8, .2, 1);
  --top-h: 56px;

  /* séries dos gráficos (validadas nos dois fundos) */
  --s-youtube: #3987e5;
  --s-instagram: #d95926;

  /* aliases antigos (CSS inline das telas e JS ainda usam) */
  --page: var(--bg);
  --panel: var(--bg-subtle);
  --panel-2: var(--surface-2);
  --line: var(--border);
  --grid: var(--border);
  --accent-2: var(--accent);
  --good: var(--success);
  --ok: var(--success);
  --card: var(--surface);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #ffffff; --bg-subtle: #fafafa; --surface: #ffffff; --surface-2: #f4f4f5; --surface-3: #ebebed;
    --border: #e5e5e5; --border-strong: #d4d4d4;
    --text: #0a0a0a; --text-2: #525252; --muted: #737373;
    --primary: #0a0a0a; --primary-fg: #ffffff; --primary-hover: #262626;
    --accent: #2563eb; --accent-soft: rgba(37, 99, 235, .08); --focus: #2563eb;
    --success: #16a34a; --warning: #b45309; --danger: #dc2626; --danger-soft: rgba(220, 38, 38, .08);
    --overlay: rgba(0, 0, 0, .35);
    --shadow-pop: 0 8px 30px rgba(0, 0, 0, .12), 0 0 0 1px var(--border);
    --stage: #f4f4f5; --checker-a: #e5e5e5; --checker-b: #f4f4f5;
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff; --bg-subtle: #fafafa; --surface: #ffffff; --surface-2: #f4f4f5; --surface-3: #ebebed;
  --border: #e5e5e5; --border-strong: #d4d4d4;
  --text: #0a0a0a; --text-2: #525252; --muted: #737373;
  --primary: #0a0a0a; --primary-fg: #ffffff; --primary-hover: #262626;
  --accent: #2563eb; --accent-soft: rgba(37, 99, 235, .08); --focus: #2563eb;
  --success: #16a34a; --warning: #b45309; --danger: #dc2626; --danger-soft: rgba(220, 38, 38, .08);
  --overlay: rgba(0, 0, 0, .35);
  --shadow-pop: 0 8px 30px rgba(0, 0, 0, .12), 0 0 0 1px var(--border);
  --stage: #f4f4f5; --checker-a: #e5e5e5; --checker-b: #f4f4f5;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; animation-iteration-count: 1 !important; }
}

/* Seletor PT | EN do js/i18n.js: mesmo visual do resto (vale nos dois temas). */
html .lang-sw { border: 1px solid var(--border); background: var(--surface-2); padding: 2px; gap: 2px; border-radius: 99px; color: var(--text-2); }
html .lang-sw > button { padding: 4px 8px; border-radius: 99px; font: 500 11px/1 var(--font); opacity: 1; color: var(--text-2); transition: background var(--dur-1), color var(--dur-1); }
html .lang-sw > button:hover { color: var(--text); }
html .lang-sw > button.on { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--border); }
html .lang-sw.float { top: 16px; right: 16px; background: var(--surface-2); color: var(--text-2); }
html .corner .lang-sw, html .me .lang-sw { margin: 0; }