/* ==========================================================================
   Calcaris — Tokens (fonte única de verdade da paleta)
   Importado por: css/shared.css (exam/calc/medicacoes), css/evolve.css,
   css/mobile.css e os <style> inline de index.html e terms.html.
   Editar uma cor AQUI propaga para todos os apps.

   Direção "Arco de luz (v3)" (2026-07-13): minimalismo dark + bento.
   Quase-preto azulado, superfícies chapadas, hairline borders, acento de
   ação ice-cyan e canais vivos por app (exam/evolve/calc/med).
   Glow frio aparece apenas para orientar foco, hover e CTA.
   ========================================================================== */
:root {
    --bg-color: #0d1117;            /* quase-preto azulado do novo ícone */
    --surface-color: #131922;
    --surface-hover: #19222d;
    --primary-color: #7cc4e8;
    --primary-hover: #9bd5f0; /* dark theme: hover clareia */
    --primary-light: #c5e9f8; /* gradientes de logo/ícone e labels claras */
    --primary-rgb: 124, 196, 232;
    --primary-glow: rgba(124, 196, 232, 0.28);
    --accent-color: #a8d8f0;
    --accent-hover: #c4e8f7;
    --accent-light: #d9f1fb;
    --accent-rgb: 168, 216, 240;
    /* Canais multiparamétricos — identidade por app (não semântica de ação) */
    --ch-exam: #5bd6bd;    --ch-exam-rgb: 91, 214, 189;   /* menta clínica */
    --ch-evolve: #66aef5;  --ch-evolve-rgb: 102, 174, 245; /* azul vital */
    --ch-calc: #b294ff;    --ch-calc-rgb: 178, 148, 255;  /* violeta */
    --ch-med: #f088a5;     --ch-med-rgb: 240, 136, 165;   /* rosa-coral */
    --text-primary: #e9edef;
    --text-secondary: #97a3aa; /* WCAG AA sobre o bg #0d1117 */
    --text-muted: #7d8a93;     /* WCAG AA até sobre --surface-hover */
    --text-on-accent: #071119; /* contraste alto sobre ice-cyan */
    --border-color: rgba(255, 255, 255, 0.07);
    --border-hover: rgba(255, 255, 255, 0.14);
    --success-color: #3ecf8e;
    --success-rgb: 62, 207, 142;
    --error-color: #e0655c;
    --error-rgb: 224, 101, 92;
    --warning-color: #d9a13c;
    --warning-rgb: 217, 161, 60;
    --teal-color: #14b8a6;
    --teal-light: #2dd4bf;
    --teal-rgb: 20, 184, 166;
    --favorite-color: #ffb800;  /* ouro de "favorito" — distinto do warning */
    --favorite-rgb: 255, 184, 0; /* canal p/ rgba(var(--favorite-rgb), alpha) */
    --white-rgb: 255, 255, 255;
    --black-rgb: 0, 0, 0;
    --glass-bg: rgba(19, 25, 34, 0.94); /* legado: "glass" agora é superfície quase opaca */
    --glass-border: rgba(255, 255, 255, 0.07);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 32px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 8px 28px rgba(var(--primary-rgb), 0.18);
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-full: 999px;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 1.75rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --font-ui: 'Hanken Grotesk', 'Segoe UI', system-ui, sans-serif;
    --font-display: 'Hanken Grotesk', 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'Hanken Grotesk', 'Segoe UI', system-ui, sans-serif;
    --font-xs: 0.75rem;
    --font-sm: 0.85rem;
    --font-base: 0.95rem;
    --font-md: 1rem;
    --font-lg: 1.15rem;
    --font-xl: 1.4rem;
    --font-2xl: 1.75rem;
    --font-hero: 3rem;
    --leading-tight: 1.25;
    --leading-base: 1.5;
    --leading-relaxed: 1.65;
    --tracking-label: 0.06em;
    --focus-ring: 0 0 0 3px var(--primary-glow), 0 0 0 1px var(--accent-color);
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    --app-container-bg: #0f141c;
    --header-bg: rgba(13, 17, 23, 0.88);
    --panel-header-bg: rgba(0, 0, 0, 0.18);
    --drop-zone-bg: #111821;
    --drop-zone-border: rgba(255, 255, 255, 0.1);
    --drop-zone-hover-bg: #16202b;
    --drop-zone-drag-bg: rgba(168, 216, 240, 0.07);
    --modal-bg: #151b24;
    --modal-border: rgba(255, 255, 255, 0.08);
    --modal-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
    --scrollbar-thumb: rgba(255, 255, 255, 0.08);
    --scrollbar-hover: rgba(255, 255, 255, 0.15);
    --body-gradient-1: radial-gradient(ellipse 70% 50% at 15% 0%, rgba(124, 196, 232, 0.06), transparent);
    --body-gradient-2: radial-gradient(ellipse 60% 45% at 85% 100%, rgba(102, 174, 245, 0.04), transparent);
    --input-bg: rgba(255, 255, 255, 0.04);
    --input-border: rgba(255, 255, 255, 0.08);
    --logo-gradient-start: #a8d8f0;
    --logo-gradient-end: #66aef5;
}

/* Light Mode — papel frio, mesma disciplina multiparamétrica */
[data-theme="light"] {
    --bg-color: #f6f8fa;
    --surface-color: #ffffff;
    --surface-hover: #edf2f6;
    --primary-color: #286f93;
    --primary-hover: #1d5b7b;
    --primary-rgb: 40, 111, 147;
    --primary-glow: rgba(40, 111, 147, 0.14);
    --accent-color: #1f789f;
    --accent-hover: #185f80;
    --accent-light: #7cc4e8;
    --accent-rgb: 31, 120, 159;
    /* Canais multiparamétricos — darken p/ contraste AA no papel */
    --ch-exam: #167c70;    --ch-exam-rgb: 22, 124, 112;
    --ch-evolve: #2769ad;  --ch-evolve-rgb: 39, 105, 173;
    --ch-calc: #6e4bcc;    --ch-calc-rgb: 110, 75, 204;
    --ch-med: #b74668;     --ch-med-rgb: 183, 70, 104;
    --text-primary: #16191b;
    --text-secondary: #45525a;
    --text-muted: #5f6b73;
    --text-on-accent: #ffffff;
    --border-color: #e2e6e4;
    --border-hover: #c8cfcb;
    --success-color: #178a58;
    --success-rgb: 23, 138, 88;
    --error-color: #d64545;
    --error-rgb: 214, 69, 69;
    --warning-color: #b97b1f;
    --warning-rgb: 185, 123, 31;
    --teal-color: #0f766e;
    --teal-light: #0d9488;
    --teal-rgb: 15, 118, 110;
    --favorite-color: #8a5a00; /* contraste AA sobre superfícies claras */
    --favorite-rgb: 138, 90, 0;
    --glass-bg: rgba(255, 255, 255, 0.96);
    --glass-border: #e2e6e4;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.12);
    --shadow-glow: 0 8px 24px rgba(var(--primary-rgb), 0.10);
    --app-container-bg: #f6f8fa;
    --header-bg: rgba(255, 255, 255, 0.9);
    --panel-header-bg: transparent;
    --drop-zone-bg: #ffffff;
    --drop-zone-border: #c8cfcb;
    --drop-zone-hover-bg: #edf2f6;
    --drop-zone-drag-bg: rgba(31, 120, 159, 0.07);
    --modal-bg: #ffffff;
    --modal-border: #e2e6e4;
    --modal-shadow: 0 24px 48px rgba(0, 0, 0, 0.15);
    --scrollbar-thumb: #c8cfcb;
    --scrollbar-hover: #97a3aa;
    --body-gradient-1: radial-gradient(ellipse 70% 50% at 15% 0%, rgba(40, 111, 147, 0.05), transparent);
    --body-gradient-2: radial-gradient(ellipse 60% 45% at 85% 100%, rgba(39, 105, 173, 0.04), transparent);
    --input-bg: #edf2f6;
    --input-border: #c8cfcb;
    --logo-gradient-start: #286f93;
    --logo-gradient-end: #2769ad;
    --input-bg-color: #edf2f6;
}

/* Global scrollbars — design-system tokens (--scrollbar-thumb / --scrollbar-hover) */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-hover);
}