/* DS_VERSION: 4.0.0-alpha */
/*
 * theme.css — hexalife.com.br
 * Customização de brand sobre o DS v4 (único arquivo editável pelo operador).
 * Fonte: identidade extraída do site WordPress original (Elementor globals).
 *   Ver .claude/ds-briefing.md e _briefing/originais/.
 *
 * Identidade: laboratório clínico (healthcare). Paleta AZUL + branco.
 * Cores oficiais (Elementor):
 *   primary   #005878 (azul petróleo profundo — headers/títulos)
 *   secondary #0085BD (azul médio — core da marca)
 *   accent    #0071BC (azul vívido — CTA)
 *   text      #404040 / tint #D3EBFF
 * Tipografia: Roboto (corpo, self-hosted) + Helvetica/Arial (títulos, system).
 * Paleta LIGHT é a default do projeto (azul + branco, clean healthcare).
 */

/* =====================================================
   FONTES — Roboto self-hosted (subsets latin/latin-ext, pesos 300/400/500/700)
   Títulos usam Helvetica/Arial do sistema (como o site original — sem webfont).
   ===================================================== */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/styles/fonts/roboto-latin-ext-300.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/styles/fonts/roboto-latin-300.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/styles/fonts/roboto-latin-ext-400.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/styles/fonts/roboto-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/styles/fonts/roboto-latin-ext-500.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/styles/fonts/roboto-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/styles/fonts/roboto-latin-ext-700.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/styles/fonts/roboto-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* --- Brand: azul Hexalife (500 = core, 600 = CTA, 700 = petróleo/hover) --- */
  --brand-50:  #eaf6fc;
  --brand-100: #d3ebff;   /* tint oficial Elementor (d2b4fad) */
  --brand-200: #a8d7f2;
  --brand-300: #74bee6;
  --brand-400: #2e9fd6;
  --brand-500: #0085bd;   /* secondary — azul core da marca */
  --brand-600: #0071bc;   /* accent — CTA principal */
  --brand-700: #005878;   /* primary — azul petróleo (hover, headers) */
  --brand-800: #00455e;
  --brand-900: #003344;

  /* --- Fontes --- */
  --font-heading: 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
  --font-body:    'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-accent:  'Roboto', system-ui, -apple-system, sans-serif;

  /* Roboto é humanista neutra: títulos com tracking quase neutro */
  --tracking-display: -0.02em;

  /* --- Sombras tingidas no azul petróleo da marca (brand-700 #005878) --- */
  --shadow-tint-light: 0 88 120;
}

/* =====================================================
   LIGHT (default do projeto) — azul + branco, healthcare clean.
   Sobrescreve os aliases que vêm com hex indigo hardcoded no DS base.
   ===================================================== */
:root,
[data-theme="light"] {
  /* fundo branco com leve frio (clínico) */
  --bg-base:    #f3f8fb;
  --bg-warm:    #f3f8fb;
  --bg-deep:    #e9f2f8;

  /* aliases de accent → azul CTA (#0071BC) */
  --bg-active:           #0071bc12;
  --accent-muted:        #0071bc14;
  --accent-shadow:       0 6px 20px #0071bc40;
  --accent-shadow-hover: 0 10px 32px #0071bc5e;
  --border-accent:       #0071bc4d;
  --accent-on-card:      #0071bc;
  --focus-ring:          0 0 0 3px #0071bc59;
}

/* =====================================================
   DARK — variante coerente (petróleo profundo + azul claro de accent).
   Tema por seção via data-theme="dark"; não é o default.
   ===================================================== */
[data-theme="dark"] {
  --bg-base:           #03212c;   /* petróleo bem profundo derivado de #005878 */
  --bg-surface:        #06303f;
  --bg-surface-raised: #0a3a4d;
  --bg-surface-overlay:#0e4459;
  --bg-deep:           #021a23;

  --accent-base:    var(--brand-500);
  --accent-hover:   var(--brand-400);
  --accent-pressed: var(--brand-600);
  --accent-deep:    var(--brand-700);
  --text-accent:        #4fb4e6;
  --text-accent-hover:  #74bee6;
  --text-script:        #74bee6;

  --bg-active:           #0085bd1f;
  --accent-muted:        #0085bd26;
  --accent-shadow:       0 6px 20px #0085bd59;
  --accent-shadow-hover: 0 10px 32px #0085bd80;
  --border-accent:       #0085bd59;
  --border-focus:        #4fb4e6;
}