/* css/themes.css — paletas por ambiente (data-theme) x modo do usuário (data-mode)
   ------------------------------------------------------------------------------
   data-theme  = PALETA do projeto/workspace (cor de identidade). Vem do banco (projects.theme).
   data-mode   = MODO do usuário: escuro (padrão) ou claro. Fica no navegador (localStorage app_mode).
   As duas escolhas são independentes: toda paleta existe nos dois modos.
   Cada variação clara abaixo foi gerada por cálculo e validada por contraste (WCAG AA). */

/* ---- tokens por modo (valem para qualquer paleta) ---- */
:root { color-scheme: dark; --danger-ink: #FCA5A5; --warn-ink: #FCD34D; --ok-ink: #86EFAC; }
:root[data-mode="light"] {
  color-scheme: light;
  --ink: #0F172A; --muted: #475569; --chip-on-ink: #FFFFFF;
  --man: #AF3B0B; --ext: #0E6D66; --mel: #4F46E5; --inc-col: #B91C1C; --oth: #556376;
  --warn: #9E4908; --warn-bg: #FEF3C7; --warn-border: #F59E0B;
  --danger-ink: #B91C1C; --warn-ink: #92400E; --ok-ink: #166534;
}

/* ================= MODO ESCURO (padrão) ================= */

/* 1. Slate Blue (Padrão) */
[data-theme="slate"], :root:not([data-theme]) { 
  --bg: #0E141C; --panel: #151D28; --soft: #1A2330; --line: #273241;
  --main: #7FA6E8; --accent: #7FA6E8; --chip-on: #7FA6E8; --st-backlog: #4372C4; 
}
/* 2. Amber (Ouro/Sépia) */
[data-theme="amber"] { 
  --bg: #1F160A; --panel: #2A1D0D; --soft: #382611; --line: #4F3618;
  --main: #F59E0B; --accent: #F59E0B; --chip-on: #F59E0B; --st-backlog: #D97706; --st-entregue: #B45309; 
}
/* 3. Emerald (Verde Musgo Profundo) */
[data-theme="emerald"] { 
  --bg: #0A1A14; --panel: #0E241B; --soft: #133024; --line: #1B4534;
  --main: #10B981; --accent: #10B981; --chip-on: #10B981; --st-backlog: #059669; --st-entregue: #047857; 
}
/* 4. Navy (Azul Profundo) */
[data-theme="navy"] { 
  --bg: #0B1221; --panel: #0F192E; --soft: #152240; --line: #1E315C;
  --main: #3B82F6; --accent: #3B82F6; --chip-on: #3B82F6; --st-backlog: #1D4ED8; 
}
/* 5. Wine (Vinho Elegante) */
[data-theme="wine"] { 
  --bg: #1F0D11; --panel: #2E1219; --soft: #3D1822; --line: #572230;
  --main: #F43F5E; --accent: #F43F5E; --chip-on: #F43F5E; --st-backlog: #E11D48; 
}
/* 6. Cyber Violet (Roxo Imersivo) */
[data-theme="violet"] { 
  --bg: #170B24; --panel: #210F33; --soft: #2E1547; --line: #421E66;
  --main: #A855F7; --accent: #A855F7; --chip-on: #A855F7; --st-backlog: #7E22CE; 
}
/* 7. Solar Orange (Ferrugem Escuro) */
[data-theme="orange"] { 
  --bg: #24110A; --panel: #33180E; --soft: #421F12; --line: #5C2C1A;
  --main: #F97316; --accent: #F97316; --chip-on: #F97316; --st-backlog: #C2410C; 
}
/* 8. Ciano (Aqua Profundo) */
[data-theme="cyan"] { 
  --bg: #0B1A1D; --panel: #102428; --soft: #142E33; --line: #1D4249;
  --main: #06B6D4; --accent: #06B6D4; --chip-on: #06B6D4; --st-backlog: #047A8F; 
}
/* 9. Magenta (Fúcsia Imersivo) */
[data-theme="magenta"] { 
  --bg: #1D0B19; --panel: #281022; --soft: #33142C; --line: #491D3E;
  --main: #DB4FB8; --accent: #DB4FB8; --chip-on: #DB4FB8; --st-backlog: #BC2697; 
}
/* 10. Graphite (Neutro Corporativo) */
[data-theme="graphite"] { 
  --bg: #131416; --panel: #1A1B1E; --soft: #222326; --line: #303236;
  --main: #A1A1AA; --accent: #A1A1AA; --chip-on: #A1A1AA; --st-backlog: #7C7C88; 
}

/* ================= MODO CLARO: uma variação por paleta ================= */
:root[data-mode="light"]:not([data-theme]), [data-mode="light"] [data-theme="slate"] {
  --bg: #EBEEF4; --panel: #FCFCFD; --soft: #DEE3ED; --line: #B7C1D1; --chip: #CDD6E4;
  --main: #235EC3; --accent: #235EC3; --chip-on: #235EC3; --chip-on-ink: #FFFFFF; --st-backlog: #1E50A4;
}
:root[data-mode="light"][data-theme="amber"], [data-mode="light"] [data-theme="amber"] {
  --bg: #F6F1E9; --panel: #FEFDFB; --soft: #F0E8DB; --line: #D8CAB0; --chip: #E9DDC9;
  --main: #8F5C06; --accent: #8F5C06; --chip-on: #8F5C06; --chip-on-ink: #FFFFFF; --st-backlog: #6D4604;
}
:root[data-mode="light"][data-theme="emerald"], [data-mode="light"] [data-theme="emerald"] {
  --bg: #EBF5F1; --panel: #FBFDFD; --soft: #DDEEE8; --line: #B6D2C9; --chip: #CDE5DD;
  --main: #0A7753; --accent: #0A7753; --chip-on: #0A7753; --chip-on-ink: #FFFFFF; --st-backlog: #07563C;
}
:root[data-mode="light"][data-theme="navy"], [data-mode="light"] [data-theme="navy"] {
  --bg: #EAEEF6; --panel: #FBFCFE; --soft: #DBE3F0; --line: #B2C0D7; --chip: #C9D5E8;
  --main: #0A5ADB; --accent: #0A5ADB; --chip-on: #0A5ADB; --chip-on-ink: #FFFFFF; --st-backlog: #094CB9;
}
:root[data-mode="light"][data-theme="wine"], [data-mode="light"] [data-theme="wine"] {
  --bg: #F5EAEC; --panel: #FDFBFC; --soft: #EEDDE0; --line: #D4B5BA; --chip: #E6CCD0;
  --main: #C60B2B; --accent: #C60B2B; --chip-on: #C60B2B; --chip-on-ink: #FFFFFF; --st-backlog: #A40924;
}
:root[data-mode="light"][data-theme="violet"], [data-mode="light"] [data-theme="violet"] {
  --bg: #F0EAF5; --panel: #FCFBFD; --soft: #E6DDEE; --line: #C5B5D4; --chip: #D9CCE6;
  --main: #8715F4; --accent: #8715F4; --chip-on: #8715F4; --chip-on-ink: #FFFFFF; --st-backlog: #750ADB;
}
:root[data-mode="light"][data-theme="orange"], [data-mode="light"] [data-theme="orange"] {
  --bg: #F6EFE9; --panel: #FEFCFB; --soft: #F0E4DB; --line: #D8C1B0; --chip: #E9D6C9;
  --main: #A94804; --accent: #A94804; --chip-on: #A94804; --chip-on-ink: #FFFFFF; --st-backlog: #863903;
}
:root[data-mode="light"][data-theme="cyan"], [data-mode="light"] [data-theme="cyan"] {
  --bg: #EAF4F6; --panel: #FBFDFE; --soft: #DBECF0; --line: #B2D1D7; --chip: #C9E3E8;
  --main: #047285; --accent: #047285; --chip-on: #047285; --chip-on-ink: #FFFFFF; --st-backlog: #035462;
}
:root[data-mode="light"][data-theme="magenta"], [data-mode="light"] [data-theme="magenta"] {
  --bg: #F5EAF2; --panel: #FEFBFD; --soft: #EFDCEA; --line: #D5B4CD; --chip: #E7CBE0;
  --main: #AE248B; --accent: #AE248B; --chip-on: #AE248B; --chip-on-ink: #FFFFFF; --st-backlog: #901D73;
}
:root[data-mode="light"][data-theme="graphite"], [data-mode="light"] [data-theme="graphite"] {
  --bg: #EFEFF0; --panel: #FCFCFD; --soft: #E4E5E7; --line: #C2C4C7; --chip: #D7D8DB;
  --main: #63636E; --accent: #63636E; --chip-on: #63636E; --chip-on-ink: #FFFFFF; --st-backlog: #52525B;
}

/* ---- botão Novo Projeto: herda a cor da paleta ativa ---- */
.btn-top-novo-projeto {
    background: color-mix(in srgb, var(--accent) 12%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent) !important;
    color: var(--accent) !important;
}
.btn-top-novo-projeto:hover { background: color-mix(in srgb, var(--accent) 25%, transparent) !important; color: var(--chip-on-ink) !important; }
:root[data-mode="light"] .btn-top-novo-projeto:hover { color: var(--accent) !important; }

/* ---- correções de contraste do modo claro (antes eram do "tema claro") ---- */
:root[data-mode="light"] .chip,
:root[data-mode="light"] .badge-st,
:root[data-mode="light"] button.btn-export { color: var(--ink); border-color: var(--line); }
:root[data-mode="light"] .tbl-filtered th { color: var(--ink); background: color-mix(in srgb, var(--panel) 85%, var(--soft)); }

/* ---- botão de alternar modo (cabeçalho) ---- */
/* o ícone mostra o modo PARA O QUAL o clique leva: sol no escuro, lua no claro */
#modeBtn .mode-ico-moon { display: none; }
:root[data-mode="light"] #modeBtn .mode-ico-sun { display: none; }
:root[data-mode="light"] #modeBtn .mode-ico-moon { display: inline; }