/* ============================================================
   New Sharing — design tokens (única fonte de verdade visual)

   Regra: nenhum arquivo de página define cor, raio, sombra ou
   espaçamento literal. Tudo vem destes tokens.

   Temas (atributo data-theme no <html>, aplicado por theme.js):
     (sem atributo)  grafite/prata — metálico escuro, padrão
     black           preto         — painel OLED
     silver          prata         — metálico claro (variação do escuro)
     light           branco        — papel

   Escala de UI: theme.js define --ui-scale; o html escala o
   rem inteiro (sem `zoom`), então 1rem = 16px * --ui-scale.
   ============================================================ */

:root {
  color-scheme: dark;

  /* ---- superfícies ---- */
  --bg:          #101318;   /* página */
  --surface-1:   #191d24;   /* cartões, painéis, barras */
  --surface-2:   #232830;   /* elevado / hover */
  --surface-3:   #30363f;   /* pressionado / selecionado */
  --surface-sunk:#0a0c0f;   /* campos e áreas rebaixadas */
  --scrim:       rgba(4, 5, 7, 0.82);
  --stage:       #08090c;   /* palco sempre escuro */
  --bg-top:      #1c2129;
  --bg-rain-a:   rgba(201, 209, 217, 0.035);
  --bg-rain-b:   rgba(139, 148, 158, 0.05);

  /* ---- linhas ---- */
  --line:        #3f4650;
  --line-strong: #6e7681;

  /* ---- texto ---- */
  --fg:          #f2f4f7;
  --fg-2:        #c9d1d9;   /* secundário */
  --fg-3:        #9aa3ad;   /* terciário, contraste AA nos painéis */
  --fg-inverse:  #101318;
  --placeholder: #8b949e;

  /* acento = prateado brilhante; o hover sobe para quase branco */
  --accent:       #d7dee5;
  --accent-hover: #f0f4f8;
  --accent-weak:  rgba(215, 222, 229, 0.16);
  --on-accent:    #0f1318;

  /* ---- semânticas ---- */
  --ok:          #3ddc84;   /* online, falando, sucesso */
  --ok-weak:     rgba(61, 220, 132, 0.14);
  --warn:        #ffd166;   /* aviso, staff/admin */
  --warn-weak:   rgba(255, 209, 102, 0.14);
  --danger:      #ff4757;   /* erro, ação destrutiva */
  --danger-weak: rgba(255, 71, 87, 0.12);
  --live:        #e5484d;   /* transmissão ao vivo */
  --speaking:    var(--accent-hover);

  /* botão primário = prata com texto escuro de alto contraste */
  --btn-bg:       #c6ced6;
  --btn-fg:       #0d1013;
  --btn-bg-hover: #e7ecf1;

  /* ---- cores fixas (iguais em todos os temas) ---- */
  --on-solid:      #ffffff;   /* texto sobre fundo sólido da marca (--discord) */
  --on-warn:       #1a1203;   /* texto sobre --warn sólido (botão de staff); no tema claro vira branco */
  --discord:       #5865f2;   /* cor da marca Discord: só no botão de login */
  --discord-hover: #4752c4;
  --paper:         #ffffff;   /* impressão */
  --ink:           #000000;

  /* ---- tipografia ---- */
  --font-ui:      "Inter", "Segoe UI", Arial, sans-serif;
  --font-display: "Inter", "Segoe UI", Arial, sans-serif;
  --font-mono:    ui-monospace, "Cascadia Code", "SF Mono", Consolas, "Liberation Mono", monospace;

  --text-xs:   0.75rem;    /* 12 */
  --text-sm:   0.8125rem;  /* 13 */
  --text-base: 0.9375rem;  /* 15 */
  --text-md:   1rem;       /* 16 */
  --text-lg:   1.25rem;    /* 20 */
  --text-xl:   1.5rem;     /* 24 */
  --text-2xl:  2rem;       /* 32 */
  --text-hero: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);

  --leading-tight: 1.45;
  --leading-base:  1.5;
  --track-tight:   0;
  --track-hero:    0.04em;
  --track-caps:    0.01em;

  /* ---- espaçamento (base 4px) ---- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;

  --r-xs:   0.25rem;
  --r-sm:   0.375rem;
  --r-md:   0.5rem;
  --r-lg:   0.75rem;
  --r-xl:   1rem;
  --r-full: 999px;

  /* ---- alvos de toque / controles ---- */
  --control-h:    2.5rem;    /* 40 */
  --control-h-sm: 2rem;      /* 32 */
  --control-h-lg: 2.75rem;   /* 44 — alvo mínimo em toque */

  --shadow-ink:       #000000;
  --shadow-highlight: rgba(255, 255, 255, 0.2);
  --shadow-inset:     rgba(0, 0, 0, 0.35);
  --shadow-pop:       4px 4px 0 var(--shadow-ink), 0 0 0 1px var(--line);
  --shadow-modal:     6px 6px 0 var(--shadow-ink), 0 0 0 2px var(--line-strong);
  /* ---- movimento ---- */
  --ease:     cubic-bezier(0.22, 1, 0.36, 1);
  --dur-1:    120ms;
  --dur-2:    180ms;
  --dur-3:    260ms;

  /* ---- camadas (z-index) ---- */
  --z-base:     0;
  --z-sticky:   10;
  --z-floating: 15;    /* telas flutuantes: abaixo de dock/chat */
  --z-dock:     20;
  --z-panel:    30;    /* chat, drawer */
  --z-popover:  40;
  --z-modal:    50;
  --z-ad:       55;
  --z-toast:    60;

  /* ---- layout ---- */
  --topbar-h: 3.5rem;
  --sidebar-w: 17rem;
  --chat-w:    22rem;
  --dock-h:    4.5rem;
  --page-max:  72rem;
}

/* ===== preto (OLED) ===== */
:root[data-theme="black"] {
  --bg:          #000000;
  --surface-1:   #0d1014;
  --surface-2:   #14181d;
  --surface-3:   #1f242b;
  --surface-sunk:#030405;
  --stage:       #000000;
  --line:        #333a43;
  --line-strong: #5b636d;
  --bg-top:      #10141a;
  --bg-rain-a:   rgba(201, 209, 217, 0.03);
  --bg-rain-b:   rgba(139, 148, 158, 0.04);
}


/* ===== prata (metálico escuro) ===== */
:root[data-theme="silver"] {
  --bg:          #0b0d10;
  --surface-1:   #15181d;
  --surface-2:   #1e2228;
  --surface-3:   #2a2f37;
  --surface-sunk:#070809;
  --stage:       #050607;
  --line:        #3d444d;
  --line-strong: #6e7681;
  --bg-top:      #181c22;
  --bg-rain-a:   rgba(201, 209, 217, 0.035);
  --bg-rain-b:   rgba(139, 148, 158, 0.05);

  --fg:          #eef1f4;
  --fg-2:        #c9d1d9;
  --fg-3:        #9ba5af;

  /* prateado brilhante: acento claro com brilho no hover */
  --accent:       #d7dee5;
  --accent-hover: #eef2f6;
  --accent-weak:  rgba(215, 222, 229, 0.16);
  --on-accent:    #10141a;

  --btn-bg:       #c6ced6;
  --btn-fg:       #0d1013;
  --btn-bg-hover: #e7ecf1;
  --speaking:     var(--accent-hover);
}

/* ===== claro (papel branco) ===== */
:root[data-theme="light"] {
  color-scheme: light;

  --bg:          #f6f7f9;
  --surface-1:   #ffffff;
  --surface-2:   #eceff3;
  --surface-3:   #dde2e8;
  --surface-sunk:#f1f3f6;
  --scrim:       rgba(15, 18, 22, 0.62);
  --stage:       #08090c;
  --bg-top:      #ffffff;
  --bg-rain-a:   rgba(110, 118, 129, 0.05);
  --bg-rain-b:   rgba(110, 118, 129, 0.04);

  --line:        #d5dae1;
  --line-strong: #98a1ac;

  --fg:          #16181d;
  --fg-2:        #3d434c;
  --fg-3:        #5c6570;
  --fg-inverse:  #ffffff;
  --placeholder: #5c6570;

  --accent:       #16181d;
  --accent-hover: #2c3138;
  --accent-weak:  rgba(22, 24, 29, 0.08);
  --on-accent:    #ffffff;

  --ok:          #166534;
  --ok-weak:     rgba(22, 101, 52, 0.1);
  --warn:        #7a4f00;
  --warn-weak:   rgba(122, 79, 0, 0.12);
  --danger:      #a61b32;
  --danger-weak: rgba(166, 27, 50, 0.1);
  --live:        #c81e3a;
  --speaking:    #2c3138;

  --btn-bg:       #16181d;
  --btn-fg:       #ffffff;
  --btn-bg-hover: #2c3138;
  --on-warn:      #ffffff;

  --shadow-ink:       #6e7681;
  --shadow-highlight: rgba(255, 255, 255, 0.75);
  --shadow-inset:     rgba(110, 118, 129, 0.18);
  --shadow-pop:       4px 4px 0 var(--shadow-ink), 0 0 0 1px var(--line);
  --shadow-modal:     6px 6px 0 var(--shadow-ink), 0 0 0 2px var(--line-strong);
}

/* ===== escala de UI (substitui o antigo `zoom` no body) ===== */
html { font-size: calc(100% * var(--ui-scale, 1)); }

/* ===== movimento reduzido: sistema OU preferência do site ===== */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }
}
:root[data-motion="off"] { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }

/* Seleção Rara identity */
:root, :root[data-theme="black"], :root[data-theme="silver"], :root[data-theme="light"] {
  --brand: #5865f2;
  --brand-hover: #4752c4;
  --on-brand: #ffffff;
  --accent: #9da6ff;
  --accent-hover: #c0c6ff;
  --accent-weak: rgba(88, 101, 242, 0.14);
  --on-accent: #101318;
  --btn-bg: var(--brand);
  --btn-bg-hover: var(--brand-hover);
  --btn-fg: var(--on-brand);
  --speaking: var(--ok);
  --control-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 2px 0 rgba(0,0,0,.35);
  --control-shadow-hover: inset 0 1px 0 rgba(255,255,255,.12), 0 1px 0 rgba(0,0,0,.35);
  --panel-shadow: 2px 2px 0 rgba(0,0,0,.30);
  --shadow-pop: 2px 2px 0 rgba(0,0,0,.40), 0 0 0 1px var(--line);
  --shadow-modal: 4px 4px 0 rgba(0,0,0,.40), 0 0 0 1px var(--line-strong);
}
:root[data-theme="light"] {
  --accent: #4752c4;
  --accent-hover: #3642ae;
  --on-accent: #ffffff;
}