/* assets/00-tokens.css — o sistema de design em variáveis.
 *
 * Dois temas, claro (este :root) e escuro (o bloco `:root[data-theme="dark"]` no
 * fim), escolhidos no seletor da barra superior — claro, escuro ou o do sistema.
 * Dash carrega assets/*.css em ordem ALFABÉTICA: os
 * prefixos numéricos são a ordem da cascata (tokens → fontes → base → Dash →
 * ícones → casco → componentes → telas).
 *
 * Três camadas: PRIMITIVAS (as escalas de cor), SEMÂNTICAS (o papel de cada
 * cor: texto, borda, marca, aviso…) e os NOMES ANTIGOS como aliases — cerca de
 * 176 style={} inline no Python leem var(--text-muted), var(--accent) etc., e
 * continuam funcionando sem mudar uma linha. Código novo usa as semânticas.
 *
 * As cores de marca e do papel de ECG vêm de config/brand.py (um teste confere
 * que batem); as clínicas, de config.LABEL_COLORS (semântica clínica, RNF-4).
 */

:root {
  color-scheme: light;
  /* ---------- Primitivas ---------- */
  /* teal do logo Expert (#0E778A = passo 600) */
  --teal-50: #EFFAFB;
  --teal-100: #D5F1F4;
  --teal-200: #ADE2E9;
  --teal-300: #74CAD6;
  --teal-400: #35A9BD;
  --teal-500: #1590A5;
  --teal-600: #0E778A;
  --teal-700: #0C6272;
  --teal-800: #0D4F5C;
  --teal-900: #0E414C;
  --teal-950: #062A32;
  /* navy dos títulos */
  --navy-600: #2A5D8F;
  --navy-700: #1B4B78;
  --navy-800: #12395F;
  --navy-900: #0F2533;
  /* neutros: ardósia fria, puxada de leve pro teal */
  --gray-0: #FFFFFF;
  --gray-25: #FBFCFD;
  --gray-50: #F7FAFB;
  --gray-75: #F4F7F8;
  --gray-100: #EEF2F4;
  --gray-200: #E1E8EB;
  --gray-300: #C9D4D9;
  --gray-400: #98A4B3;
  --gray-500: #627084;
  --gray-600: #4E5D6F;
  --gray-700: #3E5561;
  --gray-800: #243140;
  --gray-900: #16232E;

  /* ---------- Semânticas ---------- */
  --color-bg-canvas: var(--gray-75);
  --color-surface: var(--gray-0);
  --color-surface-subtle: var(--gray-50);
  --color-surface-sunken: var(--gray-100);

  --color-text: var(--gray-900);
  --color-text-secondary: var(--gray-700);
  --color-text-muted: var(--gray-500);      /* 5,0:1 no branco — passa no AA (o antigo #94a3b8 dava 2,56:1) */
  --color-text-subtle: var(--gray-400);     /* só decorativo e placeholder */
  --color-heading: var(--navy-900);

  --color-border: var(--gray-200);
  --color-border-strong: var(--gray-300);

  --color-brand: var(--teal-600);           /* branco sobre ele: 5,22:1 */
  --color-brand-hover: var(--teal-700);
  --color-brand-active: var(--teal-800);
  --color-brand-subtle: var(--teal-50);
  --color-brand-soft: var(--teal-100);
  --color-brand-text: var(--teal-800);
  --color-on-brand: #FFFFFF;
  --color-focus: var(--teal-500);
  /* o "balão" de alto contraste (dica do menu recolhido, rótulo da régua): escuro no tema claro, claro no escuro */
  --color-inverse-bg: var(--navy-900);
  --color-inverse-text: #FFFFFF;
  /* a folha do laudo na tela (assets/40-review.css .report-paper) */
  --paper-bg: var(--gray-0);
  --paper-ink: var(--color-text);
  /* o PAPEL DO PDF impresso — a prévia da assinatura (assets/48-signature.css). Fica fora do bloco escuro de
     propósito: a prévia mostra o que sai no PDF, que é branco nos dois temas (as cores de pdf/style.py). */
  --pdf-paper: #FFFFFF;
  --pdf-ink: #16232E;
  --pdf-muted: #3E5561;
  --pdf-rule: #AAB7BF;

  /* tons (texto ≥ 4,5:1 sobre o próprio fundo) */
  --tone-info-text: var(--teal-800);
  --tone-info-bg: var(--teal-50);
  --tone-info-border: var(--teal-200);
  --tone-warn-text: #7A4A00;
  --tone-warn-bg: #FFF8EB;
  --tone-warn-border: #F3DDAB;
  --tone-warn-icon: #B26B00;
  --tone-warn-strong: #6A3F00;              /* a frase principal da faixa de aviso de IA */
  --tone-warn-badge-bg: #FFF1D6;            /* badge--warn: "Canal não classificado", "Ganho estimado" */
  --tone-error-text: #B42318;
  --tone-error-bg: #FEF3F2;
  --tone-error-border: #FECDCA;
  --tone-success-text: #067647;
  --tone-success-bg: #ECFDF3;
  --tone-success-border: #ABEFC6;
  --tone-ai-text: #5B3FB8;                  /* saídas de modelo de IA */
  --tone-ai-bg: #F4F1FD;
  --tone-ai-border: #D9D0F7;

  /* clínicas — config.LABEL_COLORS, sem mudança (RNF-4: cor segue a semântica clínica) */
  --label-nc: #9CA3AF;
  --label-n: #16A34A;
  --label-s: #F59E0B;
  --label-v: #EF4444;
  --label-f: #A855F7;
  --label-q: #3B82F6;

  /* eventos desenhados sobre o traçado — ui/theme.py::EVENT_COLORS (e a FA, a fração de SQI baixo e a linha de FC
     da linha do tempo, ui/figures/timeline.py) — para as legendas HTML acompanharem os gráficos nos dois temas */
  --series-hr: var(--navy-700);
  --event-afib: #D97706;
  --event-low-sqi: rgba(220, 38, 38, 0.55);
  --event-pause: #475569;
  --event-infra: #2563EB;
  --event-supra: #DB2777;
  --event-hr-max: #EA580C;
  --event-hr-min: #4F46E5;

  /* papel de ECG — o mesmo do laudo em PDF */
  --ecg-grid-minor: #F6D9D9;
  --ecg-grid-major: #E7A9A9;
  --ecg-ink: #1A1F2B;

  /* console do root: os tipos de job (as pistas da fila, a linha do tempo, os "batimentos" do monitor do servidor) e
     as partes da memória — séries de DADOS, então nunca o teal da marca (convenção 14) */
  --job-load: #2F6FB0;
  --job-classify: #6D4AD6;
  --job-exclude: #C2410C;
  --job-afib: #B7791F;
  --job-groups: #3F7D20;
  --job-save: #52606D;
  --job-prefetch: #8C97A3;
  --mem-base: #2A5D8F;
  --mem-exams: #8E5BB5;
  --mem-work: #D9822B;

  /* ---------- Tipografia ---------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --fs-2xs: 10.5px;
  --fs-xs: 11.5px;
  --fs-sm: 12.5px;
  --fs-md: 13.5px;
  --fs-lg: 15px;
  --fs-xl: 18px;
  --fs-2xl: 22px;
  --fs-3xl: 28px;
  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-normal: 1.5;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --ls-tight: -0.011em;
  --ls-caps: 0.06em;

  /* ---------- Espaço, forma, profundidade, movimento ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 999px;
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-md: 0 6px 18px rgba(16, 24, 40, 0.10);
  --shadow-lg: 0 16px 40px rgba(16, 24, 40, 0.14);
  --z-page-sticky: 10;   /* o que gruda DENTRO da página (a doca de filtros) — abaixo do trilho lateral */
  --z-sticky: 20;
  --z-topbar: 40;
  --z-dropdown: 60;
  --z-overlay: 80;
  --z-modal: 100;
  --z-toast: 120;
  --z-tooltip: 140;
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 280ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* ---------- Layout do casco ---------- */
  --topbar-h: 58px;
  --sidebar-w: 236px;
  --rail-w: 68px;
  --summary-w: 312px;
  --content-pad: 24px;

  /* ---------- Nomes antigos (aliases) — não usar em código novo ---------- */
  --page-bg: var(--color-bg-canvas);
  --surface: var(--color-surface);
  --surface-2: var(--color-surface-subtle);
  --text: var(--color-text);
  --text-secondary: var(--color-text-secondary);
  --text-muted: var(--color-text-muted);
  --border: var(--color-border);
  --border-strong: var(--color-border-strong);
  --accent: var(--color-brand);
  --accent-dark: var(--color-brand-hover);
  --accent-soft: var(--color-brand-subtle);
  --accent-contrast: var(--color-on-brand);
  --status-good: var(--label-n);
  --status-warning: #D98A00;
  --status-critical: #D03B3B;
  --status-neutral: var(--gray-500);
  --status-info: var(--color-brand);
  --warning-bg: var(--tone-warn-bg);
  --warning-border: var(--tone-warn-border);
  --warning-text: var(--tone-warn-text);
  --error-bg: var(--tone-error-bg);
  --error-border: var(--tone-error-border);
  --error-text: var(--tone-error-text);
  --success-text: var(--tone-success-text);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}

/* ── Tema escuro ──────────────────────────────────────────────────────────────
 * Ligado por data-theme="dark" no <html>. Quem marca é o script do <head> (ui/theme.py::THEME_BOOT_JS), ANTES de o
 * CSS pintar — inclusive no modo "sistema", que ele resolve pela preferência do sistema operacional —, então não há
 * bloco @media (prefers-color-scheme) aqui: era uma cópia deste que precisava mudar junto, à mão.
 * Só as SEMÂNTICAS mudam. As primitivas (--teal-*, --navy-*, --gray-*) são as mesmas nos dois temas: quem precisa
 * acompanhar o tema lê uma semântica. Os aliases antigos (--surface, --accent…) apontam para as semânticas no próprio
 * :root, então acompanham sozinhos. As cores dos GRÁFICOS moram em ui/theme.py (THEMES["dark"]), com a mesma
 * superfície, o mesmo texto e o mesmo papel de ECG.
 */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg-canvas:        #0F1923;
  --color-surface:          #16232E;
  --color-surface-subtle:   #1C2D3B;
  --color-surface-sunken:   #0F1923;
  --color-text:             #EEF2F4;
  --color-text-secondary:   #C9D4D9;
  --color-text-muted:       #98A4B3;
  --color-text-subtle:      #627084;
  --color-heading:          #EEF2F4;
  --color-border:           #243140;
  --color-border-strong:    #3E5561;
  /* teal-400: 5,75:1 como texto sobre a superfície e 5,46:1 sob o texto escuro de --color-on-brand (o teal-500 com
     texto branco dava 3,77:1, abaixo do AA, em todo botão primário). */
  --color-brand:            var(--teal-400);
  --color-brand-hover:      var(--teal-300);
  --color-brand-active:     var(--teal-200);
  --color-brand-subtle:     rgba(53, 169, 189, 0.14);
  --color-brand-soft:       rgba(53, 169, 189, 0.24);
  --color-brand-text:       var(--teal-300);
  --color-on-brand:         var(--teal-950);
  --color-focus:            var(--teal-300);
  --color-inverse-bg:       #EEF2F4;
  --color-inverse-text:     #0F1923;
  --paper-bg:               var(--color-surface);
  --paper-ink:              var(--color-text);
  --tone-info-text:         var(--teal-300);
  --tone-info-bg:           rgba(53, 169, 189, 0.12);
  --tone-info-border:       rgba(53, 169, 189, 0.30);
  --tone-warn-text:         #FCD34D;
  --tone-warn-bg:           rgba(161, 96, 0, 0.18);
  --tone-warn-border:       rgba(251, 191, 36, 0.30);
  --tone-warn-icon:         #FBBF24;
  --tone-warn-strong:       #FDE68A;
  --tone-warn-badge-bg:     rgba(161, 96, 0, 0.32);
  --tone-error-text:        #FCA5A5;
  --tone-error-bg:          rgba(180, 35, 24, 0.18);
  --tone-error-border:      rgba(248, 113, 113, 0.35);
  --tone-success-text:      #6EE7B7;
  --tone-success-bg:        rgba(6, 118, 71, 0.18);
  --tone-success-border:    rgba(52, 211, 153, 0.30);
  --tone-ai-text:           #C4B5FD;
  --tone-ai-bg:             rgba(91, 63, 184, 0.18);
  --tone-ai-border:         rgba(167, 139, 250, 0.35);
  /* eventos sobre o traçado — os passos escuros de ui/theme.py (THEMES["dark"]["events"]) */
  --event-pause:            #94A3B8;
  --event-infra:            #60A5FA;
  --event-supra:            #F472B6;
  --event-hr-max:           #FB923C;
  --event-hr-min:           #818CF8;
  --series-hr:              #A9C1DB;
  --event-afib:             #F59E0B;
  --event-low-sqi:          rgba(248, 113, 113, 0.55);
  /* papel de ECG escuro — o mesmo dos gráficos (ui/theme.py) */
  --ecg-grid-minor:         #2D2B35;
  --ecg-grid-major:         #4C363E;
  --ecg-ink:                #E2E8F0;
  /* console do root: os passos claros dos tipos de job e das partes da memória */
  --job-load:               #7DB3EA;
  --job-classify:           #B4A2F5;
  --job-exclude:            #FB9A5B;
  --job-afib:               #F2C14E;
  --job-groups:             #8FD36A;
  --job-save:               #A9B6C3;
  --job-prefetch:           #6E7B88;
  --mem-base:               #6F9BD1;
  --mem-exams:              #C79BE8;
  --mem-work:               #F0A85C;
  --status-warning:         #FBBF24;
  --status-critical:        #F87171;
  /* sombra sobre fundo escuro: mais escura e mais densa, senão some */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.40);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.50);
}