/* ============================================================
   Tumacord — tokens de design
   ============================================================ */
:root {
  color-scheme: dark;

  /* Superfícies, do mais fundo ao mais alto */
  --bg-void:      #07080d;
  --bg-rail:      #0c0e17;
  --bg-sidebar:   #11141f;
  --bg-main:      #161a28;
  --bg-raised:    #1c2133;
  --bg-input:     #0e1119;
  --bg-hover:     rgba(255, 255, 255, .045);
  --bg-active:    rgba(255, 255, 255, .085);

  /* Texto */
  --text:         #e9ecf7;
  --text-soft:    #b3bbd4;
  --text-muted:   #8891ad;
  --text-faint:   #626a85;

  /* Traços */
  --line:         rgba(255, 255, 255, .07);
  --line-strong:  rgba(255, 255, 255, .13);

  /* Marca — o acento acompanha a cor do usuário */
  --accent:       #6c8cff;
  --accent-soft:  color-mix(in srgb, var(--accent) 18%, transparent);
  --accent-line:  color-mix(in srgb, var(--accent) 42%, transparent);
  --accent-text:  color-mix(in srgb, var(--accent) 72%, white);
  --accent-ink:   #0a0d18;

  --green:        #3fd18b;
  --yellow:       #ffc357;
  --red:          #ff5f6b;
  --purple:       #b98cff;

  /* Forma */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* Profundidade */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, .55);
  --shadow-lg: 0 24px 64px -16px rgba(0, 0, 0, .7);
  --glow: 0 0 0 1px var(--accent-line), 0 8px 32px -12px var(--accent);

  /* Ritmo */
  --rail-w: 74px;
  --sidebar-w: 248px;
  --members-w: 232px;
  --header-h: 52px;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --fast: 120ms var(--ease);
  --med: 220ms var(--ease);

  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Noto Sans", "Cantarell", sans-serif;
  --mono: ui-monospace, "JetBrains Mono", "Fira Code", "Cascadia Code",
          "Source Code Pro", Menlo, Consolas, monospace;
}

/* Tema claro opcional — quem quiser queimar a retina que fique à vontade. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg-void:    #dfe3ee;
  --bg-rail:    #e6e9f3;
  --bg-sidebar: #eef0f7;
  --bg-main:    #f7f8fc;
  --bg-raised:  #ffffff;
  --bg-input:   #ffffff;
  --bg-hover:   rgba(10, 14, 30, .05);
  --bg-active:  rgba(10, 14, 30, .09);
  --text:       #171a26;
  --text-soft:  #414861;
  --text-muted: #5c6480;
  --text-faint: #858ca6;
  --line:       rgba(10, 14, 30, .09);
  --line-strong:rgba(10, 14, 30, .17);
  --accent-text: color-mix(in srgb, var(--accent) 84%, black);
  --accent-ink: #ffffff;
  --shadow-md: 0 8px 24px -10px rgba(20, 26, 48, .28);
  --shadow-lg: 0 24px 60px -18px rgba(20, 26, 48, .34);
}

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