/*
 * Tokens de tema. Los colores base se tomaron del propio panel CUI
 * (PluginControlCenter.cs) convertidos de RGBA (0-1) a hex, para que la
 * app web se sienta como una continuacion del panel del juego y no como
 * algo distinto. El acento (#5865F2) coincide con el azul de Discord.
 */
:root {
  /* superficies */
  --bg-app: #0b0c0e;
  --bg-sidebar: #161719;
  --bg-topbar: #1b1d20;
  --bg-content: #1d1f22;
  --bg-card: #202226;
  --bg-card-hover: #25282c;
  --bg-input: #111214;
  --bg-row-alt: rgba(255, 255, 255, 0.02);
  --border-subtle: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.14);

  /* texto */
  --text-primary: #e5e7eb;
  --text-secondary: #b4b8c0;
  --text-muted: #9499a3;
  --text-disabled: #5b5f66;

  /* acento / estado */
  --accent: #5865f2;
  --accent-hover: #6b76f5;
  --accent-soft: rgba(88, 101, 242, 0.15);
  --success: #59c76b;
  --success-soft: rgba(89, 199, 107, 0.15);
  --danger: #d95252;
  --danger-soft: rgba(217, 82, 82, 0.15);
  --warning: #ebbf40;
  --warning-soft: rgba(235, 191, 64, 0.15);

  /* forma */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.25);

  /* layout */
  --sidebar-width: 232px;
  --sidebar-width-collapsed: 72px;
  --topbar-height: 60px;

  /* motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
}