/* ============================================================
   palette.css — gerador de paleta a partir de --primary/--secondary
   (desktop) e --accent (mobile).

   Não define cores novas: LÊ as variáveis já definidas pelo tema
   ativo (web/assets/css/themes/*.css) e deriva automaticamente uma
   escala de tons (50 = tint bem claro … 900 = shade bem escuro) via
   color-mix(). Trocar de tema recalcula a escala inteira sozinho —
   não há passo de build nem JS envolvido.

   Ordem de carregamento (depois do tema, antes de overrides finais):
     desktop: style.css → responsive.css → tema-ativo.css → palette.css → app-fixes.css
     mobile:  pipetrack.css → app-mobile.css → tema-ativo.css → palette.css

   Não sobrescreve nada que o tema já define explicitamente
   (--accent-soft, --accent-shade, etc.) — só adiciona tokens novos
   (--accent-50…900, --primary-50…900, --secondary-50…900) para uso
   opcional e progressivo em CSS novo.
   ============================================================ */

@supports (color: color-mix(in srgb, red, blue)) {
  :root {
    /* --primary/--secondary são triplas RGB "r, g, b" (convenção do
       template Ki-Admin, usada via rgba(var(--primary),1)). rgb(var(--x))
       faz a substituição textual virar uma cor válida para o color-mix. */
    --primary-500: rgb(var(--primary));
    --primary-50:  color-mix(in srgb, var(--primary-500) 8%,  white);
    --primary-100: color-mix(in srgb, var(--primary-500) 16%, white);
    --primary-200: color-mix(in srgb, var(--primary-500) 28%, white);
    --primary-300: color-mix(in srgb, var(--primary-500) 44%, white);
    --primary-400: color-mix(in srgb, var(--primary-500) 70%, white);
    --primary-600: color-mix(in srgb, var(--primary-500) 88%, black);
    --primary-700: color-mix(in srgb, var(--primary-500) 74%, black);
    --primary-800: color-mix(in srgb, var(--primary-500) 60%, black);
    --primary-900: color-mix(in srgb, var(--primary-500) 46%, black);
    --primary-soft:   var(--primary-50);
    --primary-strong: var(--primary-700);

    --secondary-500: rgb(var(--secondary));
    --secondary-50:  color-mix(in srgb, var(--secondary-500) 8%,  white);
    --secondary-100: color-mix(in srgb, var(--secondary-500) 16%, white);
    --secondary-200: color-mix(in srgb, var(--secondary-500) 28%, white);
    --secondary-300: color-mix(in srgb, var(--secondary-500) 44%, white);
    --secondary-400: color-mix(in srgb, var(--secondary-500) 70%, white);
    --secondary-600: color-mix(in srgb, var(--secondary-500) 88%, black);
    --secondary-700: color-mix(in srgb, var(--secondary-500) 74%, black);
    --secondary-800: color-mix(in srgb, var(--secondary-500) 60%, black);
    --secondary-900: color-mix(in srgb, var(--secondary-500) 46%, black);
    --secondary-soft:   var(--secondary-50);
    --secondary-strong: var(--secondary-700);

    /* --accent (mobile) já é uma cor hex válida — não precisa do rgb(var()) */
    --accent-50:  color-mix(in srgb, var(--accent) 8%,  white);
    --accent-100: color-mix(in srgb, var(--accent) 16%, white);
    --accent-200: color-mix(in srgb, var(--accent) 28%, white);
    --accent-300: color-mix(in srgb, var(--accent) 44%, white);
    --accent-400: color-mix(in srgb, var(--accent) 70%, white);
    --accent-600: color-mix(in srgb, var(--accent) 88%, black);
    --accent-700: color-mix(in srgb, var(--accent) 74%, black);
    --accent-800: color-mix(in srgb, var(--accent) 60%, black);
    --accent-900: color-mix(in srgb, var(--accent) 46%, black);
  }
}

/* Fallback estático para browsers sem color-mix() — usa o próprio tom
   base em vez de tint/shade (perde a variação, mantém a cor funcional). */
@supports not (color: color-mix(in srgb, red, blue)) {
  :root {
    --primary-500: rgb(var(--primary));
    --primary-50: var(--primary-500); --primary-100: var(--primary-500); --primary-200: var(--primary-500);
    --primary-300: var(--primary-500); --primary-400: var(--primary-500); --primary-600: var(--primary-500);
    --primary-700: var(--primary-500); --primary-800: var(--primary-500); --primary-900: var(--primary-500);
    --primary-soft: var(--primary-500); --primary-strong: var(--primary-500);

    --secondary-500: rgb(var(--secondary));
    --secondary-50: var(--secondary-500); --secondary-100: var(--secondary-500); --secondary-200: var(--secondary-500);
    --secondary-300: var(--secondary-500); --secondary-400: var(--secondary-500); --secondary-600: var(--secondary-500);
    --secondary-700: var(--secondary-500); --secondary-800: var(--secondary-500); --secondary-900: var(--secondary-500);
    --secondary-soft: var(--secondary-500); --secondary-strong: var(--secondary-500);

    --accent-50: var(--accent); --accent-100: var(--accent); --accent-200: var(--accent);
    --accent-300: var(--accent); --accent-400: var(--accent); --accent-600: var(--accent);
    --accent-700: var(--accent); --accent-800: var(--accent); --accent-900: var(--accent);
  }
}