/* ============================================
   Prime DB — Design Tokens (2026 Refactor)
   @layer tokens — light-dark() nativo
   Dark = "deep-space navy" on-brand (2026-06-21):
   fundos navy profundos, texto off-white frio,
   cyan #23C7E8 como luz-acento (sala de servidores).
   ============================================ */

@layer tokens {

:root {
  /* ── Color Scheme ──
     Default = light (sem FOUC). O toggle (prime-improvements.js) seta
     data-theme="light|dark"; modo "auto" é resolvido em JS p/ dark/light. */
  color-scheme: light;

  /* ── Brand Blue ── (light, dark) — dark = azul vivo seguro p/ texto branco */
  --brand-blue: light-dark(#0057B8, #74b9ff); /* dark = azul claro: seguro como texto/acento no navy */
  --brand-blue-50:  light-dark(#eff6ff, #0d1a2e);
  --brand-blue-100: light-dark(#dbeafe, #122440);
  --brand-blue-200: light-dark(#bfdbfe, #16335c);
  --brand-blue-300: light-dark(#93c5fd, #2e6fb8);
  --brand-blue-400: light-dark(#60a5fa, #4a8fd8);
  --brand-blue-500: light-dark(#3b82f6, #5c9ee6);
  --brand-blue-600: light-dark(#2563eb, #74b9ff);
  --brand-blue-700: light-dark(#1d4ed8, #9ccbff);
  --brand-blue-800: light-dark(#1e40af, #c2ddff);
  --brand-blue-900: light-dark(#1e3a8a, #e3efff);

  /* ── Brand Dark Blue (hero/footer/cta bg via var) ── */
  --brand-blue-dark:      light-dark(#061A2F, #060e1a);
  --brand-blue-petroleum: light-dark(#082B45, #0b1b30);

  /* ── Brand Accent — cyan é a "luz" do tema dark ── */
  --brand-blue-accent: light-dark(#00AEEF, #38c7f5);
  --brand-cyan:        light-dark(#23C7E8, #3dd6f5);

  /* ── Logo Red (referência) ── */
  --brand-red:   light-dark(#d70f14, #ef4444);
  --brand-red-50:  light-dark(#fef2f2, #450a0a);
  --brand-red-100: light-dark(#fee2e2, #7f1d1d);
  --brand-red-200: light-dark(#fecaca, #991b1b);
  --brand-red-300: light-dark(#fca5a5, #b91c1c);
  --brand-red-400: light-dark(#f87171, #dc2626);
  --brand-red-500: light-dark(#ef4444, #f87171);
  --brand-red-600: light-dark(#dc2626, #fca5a5);
  --brand-red-700: light-dark(#b91c1c, #fecaca);
  --brand-red-800: light-dark(#991b1b, #fee2e2);
  --brand-red-900: light-dark(#7f1d1d, #fef2f2);

  /* ── BG & Surface — navy profundo, superfícies elevadas com tint azul ── */
  --bg-primary:    light-dark(#ffffff, #0a1422);
  --bg-secondary:  light-dark(#F4F7FB, #0f1d31);
  --bg-card:       light-dark(#ffffff, #112138);
  --bg-light:      light-dark(#F4F7FB, #0f1d31);

  /* ── Text — off-white frio, alto contraste no navy ── */
  --text-primary:   light-dark(#111827, #e6edf6);
  --text-secondary: light-dark(#4B5563, #a9bad0);
  --text-strong:    light-dark(#111827, #f4f8fc);
  --text-muted:     light-dark(#4B5563, #8fa3be);
  --heading-color:  light-dark(#0057B8, #74b9ff);

  /* ── Borders — hairline navy translúcido ── */
  --border-color:  light-dark(#e5e7eb, #233a57);
  --border-subtle: light-dark(#d1d5db, #1a2c45);

  /* ── Hero / Dark bg ── */
  --bg-hero: light-dark(#061A2F, #05101e);
  --text-hero: light-dark(#fafafa, #eaf1f8);

  /* ── Neutral scale ── */
  --neutral-50:  light-dark(#fafafa, #0c1726);
  --neutral-100: light-dark(#f5f5f5, #112138);
  --neutral-200: light-dark(#e5e5e5, #1b2c45);
  --neutral-300: light-dark(#d4d4d4, #233a57);
  --neutral-400: light-dark(#a3a3a3, #5b7088);
  --neutral-500: light-dark(#737373, #8fa3be);
  --neutral-600: light-dark(#525252, #a9bad0);
  --neutral-700: light-dark(#404040, #c8d4e3);
  --neutral-800: light-dark(#262626, #e6edf6);
  --neutral-900: light-dark(#171717, #f4f8fc);
  --neutral-950: light-dark(#0a0a0a, #ffffff);

  /* ── Fluid typography ── */
  --text-xs:  clamp(0.75rem, 1.5vw, 0.875rem);
  --text-sm:  clamp(0.875rem, 1.8vw, 1rem);
  --text-base: clamp(1rem, 2vw, 1.125rem);
  --text-lg:  clamp(1.125rem, 2.5vw, 1.25rem);
  --text-xl:  clamp(1.25rem, 3vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 4vw, 2rem);
  --text-3xl: clamp(2rem, 5vw, 3rem);
  --text-4xl: clamp(2.5rem, 6vw, 4rem);
  --text-5xl: clamp(3rem, 8vw, 5rem);

  /* ── Shadows ── */
  --shadow-sm:      0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:      0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  --shadow-lg:      0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
  --shadow-xl:      0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
  --shadow-blue:    0 4px 14px rgba(0,87,184,0.12);
  --shadow-blue-lg: 0 10px 30px rgba(0,87,184,0.15);

  /* ── Spacing ── */
  --space-xs: clamp(0.25rem, 0.5vw, 0.5rem);
  --space-sm: clamp(0.5rem, 1vw, 1rem);
  --space-md: clamp(1rem, 2vw, 2rem);
  --space-lg: clamp(2rem, 4vw, 4rem);
  --space-xl: clamp(4rem, 8vw, 8rem);

  /* ── Radius ── */
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;

  /* ── Transitions ── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   500ms;

  /* ── White (sempre branco) ── */
  --white: #ffffff;
}

/* ── Theme switching: data-theme controla o color-scheme (logo, light-dark()) ── */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

/* Prefers-color-scheme fallback: cobre o gap antes do JS setar data-theme */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { color-scheme: dark; }
}

/* ============================================================
   DARK — overrides estruturais (elementos com cor hardcoded que
   não passam por var). Disparam quando data-theme="dark" (o JS
   resolve "auto" → "dark"/"light", então cobre OS-automático também).
   ============================================================ */
[data-theme="dark"] body { background: var(--bg-primary); }

[data-theme="dark"] .bg-white  { background: var(--bg-primary) !important; }
[data-theme="dark"] .bg-light  { background: var(--bg-secondary) !important; }

[data-theme="dark"] .site-header { background: rgba(8,16,30,0.92); }
[data-theme="dark"] .site-header.scrolled { background: rgba(6,12,22,0.97) !important; }

/* Cards / superfícies */
[data-theme="dark"] .case-card {
  background: linear-gradient(165deg, #122138 0%, #0d1a2e 100%) !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .service-card,
[data-theme="dark"] .ai-card,
[data-theme="dark"] .why-item,
[data-theme="dark"] .about-card,
[data-theme="dark"] .value-card,
[data-theme="dark"] .location-card,
[data-theme="dark"] .video-card {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .value-card *,
[data-theme="dark"] .location-card * { color: var(--text-secondary); }
[data-theme="dark"] .value-card h3, [data-theme="dark"] .value-card h4,
[data-theme="dark"] .location-card h3, [data-theme="dark"] .location-card h4 { color: var(--text-strong) !important; }
[data-theme="dark"] .ai-card h3,
[data-theme="dark"] .service-card h3,
[data-theme="dark"] .why-item h4,
[data-theme="dark"] .case-card h3,
[data-theme="dark"] .video-meta h3,
[data-theme="dark"] .process-step h4 { color: var(--text-strong) !important; }

/* Faixas claras hardcoded */
[data-theme="dark"] .partner-bar,
[data-theme="dark"] .social-proof-strip,
[data-theme="dark"] .metrics-section { background: var(--bg-secondary) !important; }
[data-theme="dark"] .partner-badge,
[data-theme="dark"] .provider-badge { background: var(--bg-card) !important; border-color: var(--border-color); color: var(--text-secondary); }

/* Formulários */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--border-color);
}
[data-theme="dark"] .contact-form .form-group:has(input) label,
[data-theme="dark"] .contact-form .form-group:has(textarea) label { background: var(--bg-card); }

/* Fundos azuis: como --brand-blue no dark é claro (texto-acento), os elementos que
   usam azul como FUNDO precisam de um azul escuro próprio p/ manter texto branco ≥4.5:1. */
[data-theme="dark"] .btn-primary { background: #0d63cf !important; border-color: #0d63cf !important; color: #fff !important; }
[data-theme="dark"] .btn-primary:hover { background: #1f76e3 !important; border-color: #1f76e3 !important; }
[data-theme="dark"] .cta-section { background: linear-gradient(135deg, #08152b 0%, #0e2a4d 100%) !important; }

} /* /@layer tokens */