/* ==========================================================================
   Health Design System — tokens
   Fonte: behance-pharmasync/DESIGN-HEALTH.md §13 + DESIGN-HEALTH-MOBILE.md §3
   Escopo: .page-health (opt-in por página; nada vaza para o resto do sistema)
   ========================================================================== */

/* Urbanist 500/600/700 — font-display: swap (carregada via <link> do Google Fonts no template) */

.page-health {
  color-scheme: light;

  /* ---- Cor (DESIGN-HEALTH §13) ---- */
  --background: #E0E9E9;
  --surface: #F0F5F5;
  --surface-raised: #FFFFFF;
  --surface-subtle: #E8EEF0;
  --surface-tint: #CFE2E9;
  --surface-ice: #B6DDE9;
  --surface-selected: #E6F1F2;
  --border: #D8E3E4;
  --border-strong: #C2D1D4;
  /* PAM F11: campos de formulario dentro de modais/sheets (contraste nao-textual >= 3:1) */
  --field-bg: #F0F5F5;
  --field-border: #7B9097;

  --text-primary: #001D3A;
  --text-body: #0B1A1F;
  --text-secondary: #56646E;
  --text-muted: #6B7A84;
  --text-inverse: #FFFFFF;

  --primary: #016273;
  --primary-hover: #01525F;
  --primary-active: #00434E;
  --primary-subtle: #D8E6E8;
  --on-primary: #FFFFFF;

  --accent: #AAF149;
  --accent-hover: #9BE236;
  --on-accent: #001D3A;

  --control-active: #001D3A;
  --control-active-hover: #0A2B4D;

  --cyan: #31B7C5;
  --cyan-subtle: #D6F0F3;
  --on-cyan: #001D3A;

  --success: #24733A;
  --success-subtle: #E8F3E9;
  --danger: #E8334A;
  --danger-text: #B42335;
  --danger-subtle: #FDE6E8;
  --warning: #8A5A00;
  --warning-subtle: #FFF4DC;
  --info: #0B5A92;
  --info-subtle: #E6F1FA;
  --focus-ring: rgba(1, 98, 115, 0.35);
  --overlay: rgba(0, 29, 58, 0.45);
  --disabled-bg: #E3EAEB;
  --disabled-fg: #9AA7AE;

  --chart-1: #016273;
  --chart-2: #AAF149;
  --chart-3: #31B7C5;
  --chart-4: #CFE2E9;
  --chart-5: #E3E8E9;

  --on-primary-muted: #D8E6E8;   /* texto secundário sobre teal (hero KPI) */
  --logo-bg: #FFFFFF;            /* fundo do círculo da logo (logo é escura) */

  --hover-overlay: rgba(0, 29, 58, 0.04);
  --selected-overlay: rgba(1, 98, 115, 0.08);
  --pattern-stripes: repeating-linear-gradient(90deg, #016273 0 2px, transparent 2px 7px);
  --pattern-hatch: repeating-linear-gradient(135deg, #8FA9B0 0 1px, transparent 1px 4px);
  --gradient-ambient: radial-gradient(60% 50% at 20% 90%, rgba(170, 241, 73, 0.18) 0%, rgba(170, 241, 73, 0) 100%),
                      radial-gradient(60% 60% at 10% 60%, rgba(49, 183, 197, 0.18) 0%, rgba(49, 183, 197, 0) 100%);

  /* ---- Tipografia ---- */
  --font-ui: "Urbanist", "Plus Jakarta Sans", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: var(--font-ui);
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  /* ---- Espaçamento ---- */
  --space-0: 0;
  --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;
  --space-20: 80px;

  /* ---- Geometria / elevação ---- */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  --shadow-card: none;
  --shadow-float: 0 12px 32px rgba(0, 29, 58, 0.08);
  --shadow-overlay: 0 24px 56px rgba(0, 29, 58, 0.16);

  --header-height: 80px;
  --nav-pill-height: 48px;
  --icon-button: 40px;
  --control-height-sm: 36px;
  --control-height-md: 44px;
  --control-height-lg: 52px;
  --content-max: 1600px;
  --grid-gap: 12px;

  /* ---- Mobile (DESIGN-HEALTH-MOBILE §3) ---- */
  --appbar-height: 56px;
  --appbar-height-large: 112px;
  --tabbar-height: 64px;
  --rail-width: 72px;
  --rail-width-expanded: 240px;
  --fab-size: 56px;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  --gutter-mobile: 16px;
  --gutter-tablet: 24px;
  --gap-mobile: 12px;
  --list-row-height: 64px;
  --list-row-height-compact: 52px;
  --touch-target: 48px;
  --touch-gap: 8px;

  --sheet-radius: 28px;
  --sheet-handle-w: 36px;
  --sheet-handle-h: 4px;
  --sheet-max-height: 92dvh;

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
  --ease-exit: cubic-bezier(0.3, 0, 1, 1);
  --dur-press: 90ms;
  --dur-short: 160ms;
  --dur-medium: 260ms;
  --dur-long: 360ms;

  --press-overlay: rgba(0, 29, 58, 0.08);
  --press-scale: 0.98;

  /* ---- Escala tipográfica (compact; restaurada por min-width) ---- */
  --text-large-title: 700 28px/34px var(--font-ui);
  --text-appbar-title: 600 18px/24px var(--font-ui);
  --fs-h3: 16px;
  --lh-h3: 22px;
  --fs-body: 15px;
  --lh-body: 22px;
  --fs-body-sm: 13px;
  --lh-body-sm: 18px;
  --fs-caption: 12px;
  --lh-caption: 16px;
  --fs-metric-xl: 32px;
  --lh-metric-xl: 36px;
  --fs-metric-lg: 24px;
  --lh-metric-lg: 30px;
  --fs-h1: 28px;
  --lh-h1: 34px;
}

@media (min-width: 768px) {
  .page-health {
    --text-appbar-title: 600 20px/28px var(--font-ui);
    --fs-h3: 18px;
    --lh-h3: 24px;
    --fs-body: 14px;
    --lh-body: 20px;
    --fs-metric-xl: 36px;
    --lh-metric-xl: 40px;
    --fs-metric-lg: 28px;
    --lh-metric-lg: 34px;
    --fs-h1: 32px;
    --lh-h1: 40px;
    --touch-target: 44px;
  }
}


/* ==========================================================================
   TEMA ESCURO  [D] decisão de implementação — o DESIGN-HEALTH.md não define dark.
   Mantém os 3 papéis: teal = dado, lima = destaque, claro-invertido = controle ativo.
   Hierarquia tonal: background < surface < surface-subtle < surface-raised.
   Contrastes calculados (WCAG): text-secondary/surface 7.4:1 · muted/raised 5.2:1 ·
   on-primary/primary 4.7:1 · lima+navy 12.4:1 · badges ≥ 7:1.
   Ativado por <html data-theme="dark"> (shell.js resolve claro/escuro/automático).
   ========================================================================== */
html[data-theme="dark"] { background: #081418; color-scheme: dark; }

html[data-theme="dark"] .page-health {
  color-scheme: dark;

  --background: #081418;
  --surface: #0F2229;
  --surface-raised: #163039;
  --surface-subtle: #12282F;
  --surface-tint: #1D4350;
  --surface-ice: #1E4A59;
  --surface-selected: #17353F;
  --border: #1E3A43;
  --border-strong: #2C4D58;
  --field-bg: #0F2229;
  --field-border: #6A8893;

  --text-primary: #E8F1F2;
  --text-body: #DCE8EA;
  --text-secondary: #9DB2B9;
  --text-muted: #8AA0A8;
  --text-inverse: #001D3A;          /* texto sobre --control-active (claro) */

  --primary: #137F92;
  --primary-hover: #0F6D7E;
  --primary-active: #0B5A68;
  --primary-subtle: #1B4753;
  --on-primary: #FFFFFF;
  --on-primary-muted: #D6F0F3;

  --accent: #AAF149;
  --accent-hover: #9BE236;
  --on-accent: #001D3A;

  --control-active: #E8F1F2;
  --control-active-hover: #FFFFFF;

  --cyan: #4CC9D6;
  --cyan-subtle: #14414A;
  --on-cyan: #001D3A;

  --success: #7FD99A;
  --success-subtle: #12301F;
  --danger: #FF5468;
  --danger-text: #FF8C99;
  --danger-subtle: #3A1A20;
  --warning: #F2C366;
  --warning-subtle: #33290F;
  --info: #7DBDF0;
  --info-subtle: #10293D;
  --focus-ring: rgba(76, 201, 214, 0.45);
  --overlay: rgba(0, 0, 0, 0.6);
  --disabled-bg: #1A2E34;
  --disabled-fg: #5F767E;

  --chart-1: #22A3B7;
  --chart-2: #AAF149;
  --chart-3: #8BE0EA;
  --chart-4: #2A4F5B;
  --chart-5: #1F3A44;

  --logo-bg: #F0F5F5;

  --hover-overlay: rgba(255, 255, 255, 0.05);
  --selected-overlay: rgba(76, 201, 214, 0.12);
  --press-overlay: rgba(255, 255, 255, 0.1);
  --pattern-stripes: repeating-linear-gradient(90deg, #22A3B7 0 2px, transparent 2px 7px);
  --pattern-hatch: repeating-linear-gradient(135deg, #5F8793 0 1px, transparent 1px 4px);

  --shadow-float: 0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-overlay: 0 24px 56px rgba(0, 0, 0, 0.6);
}