/* Tokens del Flock Design System (los mismos del informe ejecutivo). Las vistas usan SÓLO estas variables:
   si falta un color, se agrega acá con su valor oscuro. Tema: data-theme en <html>; sin atributo, el del sistema. */
:root {
  --brand: #7800C0;
  --brand-dark: #300840;
  --brand-2: #9D2BD6;
  --accent: #F85000;
  --brand-soft: #f3e6fb;
  --brand-softer: #faf5fe;
  --brand-gradient: linear-gradient(120deg, #300840 0%, #7800C0 100%);
  --on-brand: #ffffff;
  --brand-solid: #7800C0;      /* fondos de botón y avatar: con texto --on-brand pasa AA en los dos temas */
  --brand-solid-hover: #8a1fd0;
  --on-brand-hover: rgba(255, 255, 255, .10);
  --on-brand-activo: rgba(255, 255, 255, .18);
  --pildora-fg: #7800C0;
  --tap: 44px;
  --radius-btn: 9px;

  --bg: #faf5fe;
  --panel: #ffffff;
  --surface: #f8f3fc;
  --text: #2c0b3a;
  --text-soft: #6b5a78;
  --text-faint: #7d6b8c;
  --border: #e9ddf4;
  --border-strong: #d9c7ec;

  --green-bg: #dcf7e6; --green-fg: #146c34; --green: #16a34a;
  --yellow-bg: #fff4d6; --yellow-fg: #a16207; --yellow: #eab308;
  --red-bg: #fde7ee; --red-fg: #be123c; --red: #e11d48;
  --grey-bg: #f1ecf6; --grey-fg: #6b5a78; --grey: #9b8aa8;

  --radius: 12px;
  --radius-sm: 8px;
  --radius-pill: 999px;
  --shadow: 0 1px 3px rgba(48, 8, 64, .08), 0 1px 2px rgba(48, 8, 64, .05);
  --shadow-lg: 0 22px 50px -16px rgba(48, 8, 64, .42);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sidebar-w: 232px;
  --sidebar-w-compacto: 64px;
  --topbar-h: 60px;
  color-scheme: light;
}

/* Oscuro: explícito, o del sistema si el usuario eligió "según el sistema". */
:root[data-theme="dark"] {
  --brand: #b366e6;
  --brand-2: #c38aee;
  --brand-dark: #f3e9fb;
  --accent: #ff7a3d;
  --brand-soft: rgba(157, 43, 214, .22);
  --brand-softer: #180a22;
  --bg: #180a22;
  --panel: #241033;
  --surface: #2e1640;
  --text: #f3e9fb;
  --text-soft: #b7a3d0;
  --text-faint: #8f7aa8;
  --border: #3a2150;
  --border-strong: #4a2b63;
  --green-bg: rgba(52, 211, 153, .18); --green-fg: #6ee7b7; --green: #34d399;
  --yellow-bg: rgba(245, 165, 36, .20); --yellow-fg: #fcd34d; --yellow: #f5a524;
  --red-bg: rgba(244, 63, 94, .20); --red-fg: #fda4af; --red: #f43f5e;
  --grey-bg: rgba(143, 122, 168, .18); --grey-fg: #b7a3d0; --grey: #8f7aa8;
  --pildora-fg: #d7b0f3;
  --brand-solid: #7800C0;
  --brand-solid-hover: #8a1fd0;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-lg: 0 18px 46px rgba(0, 0, 0, .62);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --brand: #b366e6;
    --brand-2: #c38aee;
    --brand-dark: #f3e9fb;
    --accent: #ff7a3d;
    --brand-soft: rgba(157, 43, 214, .22);
    --brand-softer: #180a22;
    --bg: #180a22;
    --panel: #241033;
    --surface: #2e1640;
    --text: #f3e9fb;
    --text-soft: #b7a3d0;
    --text-faint: #8f7aa8;
    --border: #3a2150;
    --border-strong: #4a2b63;
    --green-bg: rgba(52, 211, 153, .18); --green-fg: #6ee7b7; --green: #34d399;
    --yellow-bg: rgba(245, 165, 36, .20); --yellow-fg: #fcd34d; --yellow: #f5a524;
    --red-bg: rgba(244, 63, 94, .20); --red-fg: #fda4af; --red: #f43f5e;
    --grey-bg: rgba(143, 122, 168, .18); --grey-fg: #b7a3d0; --grey: #8f7aa8;
    --pildora-fg: #d7b0f3;
    --brand-solid: #7800C0;
    --brand-solid-hover: #8a1fd0;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-lg: 0 18px 46px rgba(0, 0, 0, .62);
    color-scheme: dark;
  }
}