/* ==========================================================================
   Compêndio — Temas da interface

   Três temas, escolhidos pelo usuário e guardados no navegador:

     (padrão)                 azul institucional sobre fundo claro
     html[data-tema="verde"]  verde institucional sobre fundo claro
     html[data-tema="escuro"] azul institucional sobre fundo escuro

   Os temas redefinem apenas TOKENS de ds.css — nenhum componente é reescrito
   (as poucas exceções, no fim de cada bloco, são regras que leem um degrau da
   rampa numa direção que não se inverte sozinha).

   Carregar sempre DEPOIS de ds.css e style.css.
   ========================================================================== */


/* ==========================================================================
   Tema verde
   Troca a rampa da marca (azul → verde): botões, abas, links, anel de foco e
   realce das tabelas acompanham. O "informativo" passa a violeta para não se
   confundir com o "sucesso", que já é verde.
   ========================================================================== */

html[data-tema="verde"] {
  --blue-50:  #E9F5EC;
  --blue-100: #C9E8D2;
  --blue-200: #9BD4AB;
  --blue-300: #5FB77E;
  --blue-400: #2F9658;
  --blue-500: #167C42;   /* marca primária */
  --blue-600: #106334;
  --blue-700: #0C4E29;
  --blue-800: #093B20;
  --blue-900: #062B17;

  /* Acento clínico: verde-azulado mais fechado, para destacar dos verdes da marca */
  --teal-50:  #E4F2EF;
  --teal-100: #C0E2DC;
  --teal-200: #8FCCC3;
  --teal-300: #59AEA2;
  --teal-500: #0F7468;
  --teal-600: #0B5A50;
  --teal-700: #08453D;

  --status-info-surface: var(--violet-50);
  --status-info-text:    var(--violet-600);
  --status-info-solid:   var(--violet-500);
  --status-info-border:  var(--violet-300);

  --focus-ring: 0 0 0 3px rgba(22, 124, 66, 0.40);
}


/* ==========================================================================
   Tema escuro

   A rampa neutra é invertida (gray-50 = fundo mais escuro, gray-900 = texto
   mais claro), então todo componente que usa a rampa crua acompanha sozinho.
   Nas rampas coloridas os degraus são relidos assim:

     50–200 → superfícies e bordas escuras e tingidas
     300    → acento claro (ícones de toast)
     400–500→ preenchimentos sólidos (texto branco por cima)
     600    → acento vivo sobre superfície escura (ícones, links)
     700    → TEXTO CLARO sobre as superfícies 50/100
   ========================================================================== */

html[data-tema="escuro"] {
  color-scheme: dark;

  /* ---- Neutros (rampa invertida) -------------------------------------- */
  --gray-50:  #10171E;
  --gray-100: #1A242D;
  --gray-200: #27333F;
  --gray-300: #374552;
  --gray-400: #57687A;
  --gray-500: #8B9AA9;
  --gray-600: #AAB8C5;
  --gray-700: #C8D3DD;
  --gray-800: #E2E9F0;
  --gray-900: #F3F7FB;

  /* ---- Marca ---------------------------------------------------------- */
  --blue-50:  #15263A;
  --blue-100: #1C3550;
  --blue-200: #294D71;
  --blue-300: #7FB5EE;
  --blue-400: #2A6AB8;
  --blue-500: #2F7CD4;
  --blue-600: #64A6EC;
  --blue-700: #A6CCF5;
  --blue-800: #0D2540;
  --blue-900: #081A2E;

  /* ---- Acento clínico -------------------------------------------------- */
  --teal-50:  #10302D;
  --teal-100: #17403B;
  --teal-200: #235A53;
  --teal-300: #6FD0C2;
  --teal-500: #24998C;
  --teal-600: #4FC2B2;
  --teal-700: #8CDCD0;

  /* ---- Sucesso --------------------------------------------------------- */
  --green-50:  #102A1C;
  --green-100: #163A25;
  --green-300: #6FD096;
  --green-500: #1F8A50;
  --green-600: #35B370;
  --green-700: #8FE0B0;

  /* ---- Atenção --------------------------------------------------------- */
  --amber-50:  #33260F;
  --amber-100: #443114;
  --amber-300: #E9C27A;
  --amber-500: #B07C10;
  --amber-600: #DFA63C;
  --amber-700: #F2CE86;

  /* ---- Perigo ---------------------------------------------------------- */
  --red-50:  #331519;
  --red-100: #45191F;
  --red-300: #F09AA1;
  --red-500: #B93A44;
  --red-600: #D24B56;
  --red-700: #F5A9AF;

  /* ---- Informativo ----------------------------------------------------- */
  --violet-50:  #241E3D;
  --violet-300: #B7A9EE;
  --violet-500: #7A66D6;
  --violet-600: #9E8CE8;

  /* ---- Superfícies ----------------------------------------------------- */
  --surface-card:     #171F28;
  --surface-raised:   #1E2833;
  --surface-inverse:  #232F3B;
  --surface-disabled: #1C252F;
  --text-on-inverse:  var(--gray-900);

  /* ---- Ícones de status: vivos sobre superfície escura ----------------- */
  --status-success-solid: var(--green-600);
  --status-warning-solid: var(--amber-600);
  --status-danger-solid:  #E8747E;
  --status-info-solid:    var(--blue-600);
  --status-neutral-solid: var(--gray-500);

  /* ---- Elevação: no escuro, sombra é sombra mesmo ---------------------- */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.50), 0 2px 4px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.55), 0 4px 8px rgba(0, 0, 0, 0.40);
  --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.60);
  --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.35);

  --focus-ring:        0 0 0 3px rgba(79, 148, 224, 0.45);
  --focus-ring-danger: 0 0 0 3px rgba(210, 75, 86, 0.45);
}

/* -- Exceções: regras que precisam do degrau escuro, não do claro -------- */

/* :hover/:active do primário leem 600/700, que aqui são tons claros. */
html[data-tema="escuro"] .cmp-btn--primary:hover {
  background: var(--blue-400); border-color: var(--blue-400);
}
html[data-tema="escuro"] .cmp-btn--primary:active {
  background: #235A9C; border-color: #235A9C;
}
/* :hover do perigo lê o 700 (texto claro): usa o degrau sólido mais fechado. */
html[data-tema="escuro"] .cmp-btn--danger:hover {
  background: var(--red-500); border-color: var(--red-500);
}

/* Painel de marca do login: fundo próprio, fora da rampa de superfícies. */
html[data-tema="escuro"] .login__brand { background: #0C1E33; }
html[data-tema="escuro"] .login__brand p { color: #A8C6E6; }
html[data-tema="escuro"] .login__brand-foot { color: #8FB4DB; }

/* Tooltip: ds.css pinta o balão com gray-900 + texto branco. */
html[data-tema="escuro"] .cmp-tooltip__bubble {
  background: var(--surface-raised); color: var(--text-strong);
  border: 1px solid var(--border-default);
}
html[data-tema="escuro"] .cmp-tooltip__bubble::after {
  border-top-color: var(--surface-raised);
}