/* =====================================================================
   viaRGR — design tokens da plataforma única (fonte da verdade)
   ---------------------------------------------------------------------
   Gerado a partir do tema Tailwind do HoloCare:
     products/holocare/apps/web/tailwind.config.ts  (colors, radius, shadow)
     products/holocare/apps/web/app/globals.css     (variáveis --bg-*, --brand-*, --text-*)
   Cópia sincronizada para o Next.js em:
     products/holocare/apps/web/app/brand-tokens.css   (node scripts/sync-brand-tokens.js)

   Uso nas páginas estáticas:  <link rel="stylesheet" href="../assets/brand/tokens.css">
   Uso no HoloCare:            @import './brand-tokens.css';  (globals.css)

   Convenção: tokens semânticos com prefixo --via-*; os nomes do HoloCare
   (--bg-canvas, --brand-500, --text-primary, ...) são mantidos como aliases
   para que ambos os front-ends leiam os mesmos valores.
   Tema: escuro por padrão (clínico/UTI). Claro via prefers-color-scheme ou
   html[data-theme="light"]. html[data-theme="dark"] força escuro.
   ===================================================================== */

:root {
  /* --- Cor de marca (HoloCare brand.*) --- */
  --brand-50:  #e6fffe;
  --brand-100: #ccfffd;
  --brand-200: #99fffc;
  --brand-300: #5cf5f0;
  --brand-400: #2ce8e2;
  --brand-500: #00d4ce;
  --brand-600: #00aaaa;
  --brand-700: #008080;
  --brand-800: #005555;
  --brand-900: #002b2b;
  --brand-color: var(--brand-500);          /* sobrescrito por organização (BrandingApplier / ViaBranding) */

  /* --- Superfícies (HoloCare canvas/surface/elevated/overlay) --- */
  --bg-canvas:   #050c18;
  --bg-surface:  #0a1628;
  --bg-elevated: #0f1f3d;
  --bg-overlay:  #162545;
  --bg-border:   rgba(255, 255, 255, 0.07);

  /* --- Texto --- */
  --text-primary:   #f0f6ff;
  --text-secondary: #8ba4c8;   /* 6.9:1 sobre canvas */
  --text-tertiary:  #7b90b0;   /* ajustado de #4d6a91 para ≥ 4.5:1 (WCAG AA) sobre canvas/surface */
  --text-inverse:   #050c18;

  /* --- Estado --- */
  --color-success: #22d3a0;
  --color-warning: #ffb547;
  --color-error:   #ff5470;
  --color-info:    #00d4ce;
  --accent-amber:  #ffb547;
  --accent-amber-dim: rgba(255, 181, 71, 0.15);

  /* --- Tipografia (HoloCare fontFamily.display/body) --- */
  --font-display: var(--font-sora, 'Sora'), 'Sora', 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-body:    var(--font-dm-sans, 'DM Sans'), 'DM Sans', 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'JetBrains Mono', 'Cascadia Mono', Consolas, monospace;
  --via-text-xs: 12px;
  --via-text-sm: 13px;
  --via-text-md: 15px;
  --via-text-lg: 18px;
  --via-text-xl: 24px;
  --via-text-2xl: 32px;
  --via-leading: 1.6;

  /* --- Espaçamento (escala 4px) --- */
  --via-space-1: 4px;
  --via-space-2: 8px;
  --via-space-3: 12px;
  --via-space-4: 16px;
  --via-space-5: 20px;
  --via-space-6: 24px;
  --via-space-8: 32px;
  --via-space-10: 40px;

  /* --- Raio (HoloCare borderRadius 2xl/3xl/4xl) --- */
  --via-radius-sm: 8px;
  --via-radius-md: 12px;
  --via-radius-lg: 16px;
  --via-radius-xl: 24px;
  --via-radius-2xl: 32px;
  --via-radius-pill: 999px;

  /* --- Sombras / glow (HoloCare boxShadow.card/float/glow) --- */
  --shadow-card:  0 4px 24px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  --shadow-float: 0 20px 60px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.06) inset;
  --glow-brand:    0 0 40px rgba(0, 212, 206, 0.25);
  --glow-brand-lg: 0 0 80px rgba(0, 212, 206, 0.15);

  /* --- Movimento --- */
  --via-ease: cubic-bezier(.2,.8,.2,1);
  --via-dur-fast: 150ms;
  --via-dur: 250ms;

  /* --- Shell unificado (via-shell.js) --- */
  --via-shell-h: 56px;
  --via-shell-bg: rgba(5, 12, 24, 0.82);
  --via-shell-border: rgba(255, 255, 255, 0.08);
  --via-focus: 0 0 0 3px rgba(0, 212, 206, 0.45);

  /* --- Aliases semânticos --- */
  --via-bg: var(--bg-canvas);
  --via-surface: var(--bg-surface);
  --via-elevated: var(--bg-elevated);
  --via-border: var(--bg-border);
  --via-text: var(--text-primary);
  --via-muted: var(--text-secondary);
  --via-faint: var(--text-tertiary);
  --via-accent: var(--brand-color);
  --via-accent-strong: var(--brand-400);
  --via-on-accent: var(--text-inverse);

  color-scheme: dark;
}

/* ---------- Tema claro (preferência do SO) ---------- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="tech"]) {
    --bg-canvas:   #f4f8fc;
    --bg-surface:  #ffffff;
    --bg-elevated: #eaf1f9;
    --bg-overlay:  #dbe6f3;
    --bg-border:   rgba(5, 12, 24, 0.10);
    --text-primary:   #0b1a30;
    --text-secondary: #3f5878;   /* 7.4:1 sobre #f4f8fc */
    --text-tertiary:  #5a6f8c;   /* 4.9:1 */
    --text-inverse:   #ffffff;
    --brand-color: #008080;      /* brand-700: 4.6:1 sobre branco para texto/ícones */
    --via-accent-strong: #006a6a;
    --via-on-accent: #ffffff;
    --color-success: #0f9f74;
    --color-warning: #b26a00;
    --color-error:   #d0243f;
    --color-info:    #007a7a;
    --shadow-card:  0 4px 24px rgba(5, 12, 24, 0.08), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
    --shadow-float: 0 20px 60px rgba(5, 12, 24, 0.16);
    --glow-brand:    0 0 40px rgba(0, 128, 128, 0.15);
    --glow-brand-lg: 0 0 80px rgba(0, 128, 128, 0.10);
    --via-shell-bg: rgba(255, 255, 255, 0.86);
    --via-shell-border: rgba(5, 12, 24, 0.10);
    --via-focus: 0 0 0 3px rgba(0, 128, 128, 0.45);
    color-scheme: light;
  }
}

/* ---------- Tema claro forçado ---------- */
:root[data-theme="light"] {
  --bg-canvas:   #f4f8fc;
  --bg-surface:  #ffffff;
  --bg-elevated: #eaf1f9;
  --bg-overlay:  #dbe6f3;
  --bg-border:   rgba(5, 12, 24, 0.10);
  --text-primary:   #0b1a30;
  --text-secondary: #3f5878;
  --text-tertiary:  #5a6f8c;
  --text-inverse:   #ffffff;
  --brand-color: #008080;
  --via-accent-strong: #006a6a;
  --via-on-accent: #ffffff;
  --color-success: #0f9f74;
  --color-warning: #b26a00;
  --color-error:   #d0243f;
  --color-info:    #007a7a;
  --shadow-card:  0 4px 24px rgba(5, 12, 24, 0.08), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
  --shadow-float: 0 20px 60px rgba(5, 12, 24, 0.16);
  --glow-brand:    0 0 40px rgba(0, 128, 128, 0.15);
  --glow-brand-lg: 0 0 80px rgba(0, 128, 128, 0.10);
  --via-shell-bg: rgba(255, 255, 255, 0.86);
  --via-shell-border: rgba(5, 12, 24, 0.10);
  --via-focus: 0 0 0 3px rgba(0, 128, 128, 0.45);
  color-scheme: light;
}

/* ---------- Tema escuro forçado (repete o padrão para vencer o media query) ---------- */
:root[data-theme="dark"] {
  --bg-canvas:   #050c18;
  --bg-surface:  #0a1628;
  --bg-elevated: #0f1f3d;
  --bg-overlay:  #162545;
  --bg-border:   rgba(255, 255, 255, 0.07);
  --text-primary:   #f0f6ff;
  --text-secondary: #8ba4c8;
  --text-tertiary:  #7b90b0;
  --text-inverse:   #050c18;
  --brand-color: var(--brand-500);
  --via-accent-strong: var(--brand-400);
  --via-on-accent: var(--text-inverse);
  --via-shell-bg: rgba(5, 12, 24, 0.82);
  --via-shell-border: rgba(255, 255, 255, 0.08);
  color-scheme: dark;
}

/* ---------- Utilitários mínimos compartilhados ---------- */
.via-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.via-focus-ring:focus-visible { outline: 2px solid var(--via-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  :root { --via-dur-fast: 0ms; --via-dur: 0ms; }
}