/* ==========================================================================
   EVENTOS.AI — Design Tokens
   Fonte única de verdade do sistema visual. Componentes leem SEMPRE os tokens
   semânticos (--fg, --accent...), nunca um hex cru. Trocar de tema só remapeia
   os semânticos — nenhum componente conhece a cor final.
   ========================================================================== */

:root{
  /* ---- primitivos (não usar direto em componente) ---- */
  --blue-600:#2B5BD7;  --blue-700:#1E46B0;  --blue-050:#EBF0FC;
  --green-600:#15835A; --amber-600:#C98A1B; --amber-700:#9A6A12; --red-600:#C0392C;

  /* ---- semânticos: TEMA CLARO (default) ---- */
  --bg:#F6F7F9;            /* fundo da aplicação            */
  --surface:#FFFFFF;       /* cards, painéis, barras        */
  --inset:#FBFBFD;         /* zebra / campos aninhados       */
  --sidebar:#FFFFFF;       /* fundo da navegação lateral     */

  --fg:#17191F;            /* texto principal                */
  --fg-soft:#565E6C;       /* texto secundário               */
  --fg-mute:#666E7D;       /* rótulos, metadados (AA: 5,13:1 s/ branco) */

  --border:#E5E7EC;        /* divisórias, contornos leves    */
  --border-strong:#D2D6DE; /* contorno de campo / botão      */

  --accent:#2B5BD7;        /* AÇÃO: botão primário, foco     */
  --accent-press:#1E46B0;  /* hover/pressed da ação          */
  --accent-weak:#EBF0FC;   /* seleção, item ativo, badge     */
  --accent-text:#1E46B0;   /* texto/link azul sobre claro    */
  --on-accent:#FFFFFF;     /* texto sobre a cor de ação      */

  --success:#15835A;       --success-weak:#E7F4EE;
  --warning:#9A6A12;       --warning-weak:#F8EFD9;  --warning-dot:#C98A1B;
  --danger:#C0392C;        --danger-weak:#FBEAE7;

  --focus:rgba(43,91,215,.38);

  --shadow-sm:0 1px 2px rgba(20,24,33,.05),0 1px 3px rgba(20,24,33,.04);
  --shadow-md:0 1px 2px rgba(20,24,33,.05),0 8px 20px -8px rgba(20,24,33,.14);
  --shadow-lg:0 2px 4px rgba(20,24,33,.06),0 24px 48px -16px rgba(20,24,33,.22);

  /* ---- tipografia ---- */
  --font:"Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:"Cascadia Code","SFMono-Regular","Consolas",ui-monospace,monospace;

  /* ---- espaço (base 4px) ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:48px; --s9:64px;

  /* ---- forma ---- */
  --r-sm:6px; --r-md:9px; --r-lg:14px; --r-pill:999px;

  /* ---- layout ---- */
  --sidebar-w:236px;
}

/* ---- TEMA ESCURO: por preferência do sistema ---- */
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0F1217; --surface:#171B22; --inset:#10141A; --sidebar:#12161C;
    --fg:#E8EAEF; --fg-soft:#A6ADBA; --fg-mute:#838B9A;
    --border:#262C36; --border-strong:#333B47;
    --accent:#6E9BFF; --accent-press:#5385F0; --accent-weak:rgba(110,155,255,.13); --accent-text:#9CBBFF; --on-accent:#0F1217;
    --success:#4CC38A; --success-weak:rgba(21,131,90,.2);
    --warning:#E0A64B; --warning-weak:rgba(201,138,27,.18); --warning-dot:#E0A64B;
    --danger:#F0857A; --danger-weak:rgba(192,57,44,.22);
    --focus:rgba(110,155,255,.5);
    --shadow-sm:0 1px 2px rgba(0,0,0,.35);
    --shadow-md:0 1px 2px rgba(0,0,0,.4),0 10px 24px -10px rgba(0,0,0,.6);
    --shadow-lg:0 2px 4px rgba(0,0,0,.5),0 28px 56px -18px rgba(0,0,0,.7);
  }
}

/* ---- overrides explícitos do toggle (vencem a media query nos dois sentidos) ---- */
:root[data-theme="dark"]{
  --bg:#0F1217; --surface:#171B22; --inset:#10141A; --sidebar:#12161C;
  --fg:#E8EAEF; --fg-soft:#A6ADBA; --fg-mute:#838B9A;
  --border:#262C36; --border-strong:#333B47;
  --accent:#6E9BFF; --accent-press:#5385F0; --accent-weak:rgba(110,155,255,.13); --accent-text:#9CBBFF; --on-accent:#0F1217;
  --success:#4CC38A; --success-weak:rgba(21,131,90,.2);
  --warning:#E0A64B; --warning-weak:rgba(201,138,27,.18); --warning-dot:#E0A64B;
  --danger:#F0857A; --danger-weak:rgba(192,57,44,.22);
  --focus:rgba(110,155,255,.5);
  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow-md:0 1px 2px rgba(0,0,0,.4),0 10px 24px -10px rgba(0,0,0,.6);
  --shadow-lg:0 2px 4px rgba(0,0,0,.5),0 28px 56px -18px rgba(0,0,0,.7);
}
:root[data-theme="light"]{
  --bg:#F6F7F9; --surface:#FFFFFF; --inset:#FBFBFD; --sidebar:#FFFFFF;
  --fg:#17191F; --fg-soft:#565E6C; --fg-mute:#666E7D;
  --border:#E5E7EC; --border-strong:#D2D6DE;
  --accent:#2B5BD7; --accent-press:#1E46B0; --accent-weak:#EBF0FC; --accent-text:#1E46B0; --on-accent:#FFFFFF;
  --success:#15835A; --success-weak:#E7F4EE;
  --warning:#9A6A12; --warning-weak:#F8EFD9; --warning-dot:#C98A1B;
  --danger:#C0392C; --danger-weak:#FBEAE7;
  --focus:rgba(43,91,215,.38);
  --shadow-sm:0 1px 2px rgba(20,24,33,.05),0 1px 3px rgba(20,24,33,.04);
  --shadow-md:0 1px 2px rgba(20,24,33,.05),0 8px 20px -8px rgba(20,24,33,.14);
  --shadow-lg:0 2px 4px rgba(20,24,33,.06),0 24px 48px -16px rgba(20,24,33,.22);
}