/* Integra com sua paleta; campos com borda azul (default/hover/foco) e vermelho só quando inválidos e tocados/validados */

/* ===== Tokens de integração (mantêm compatibilidade com sua paleta) ===== */
:root{
  --timer-text-dim: #89a1aa;
  --timer-accent: #0ea5e9;
  --timer-accent-alt: #38bdf8;

  --gradient-primary: linear-gradient(135deg, var(--alarm-primary) 0%, var(--alarm-secondary) 100%);
  --surface-color: #fff;
  --radius-lg: 16px;

  --bg-dark: #0a0a0a;
  --bg-card: #1a1a1a;
  --text-white: #ffffff;
  --text-gray: #b0b0b0;
  --alarm-primary: #00d4ff;
  --alarm-secondary: #0099cc;
  --alarm-accent: #ff6b35;
  --alarm-success: #00ff88;
  --alarm-warning: #ffaa00;
  --alarm-danger: #ff4757;

  --gradient-accent: linear-gradient(135deg, var(--alarm-accent) 0%, #ff8c42 100%);
  --gradient-dark: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  --gradient-bg: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);

  --shadow-soft: 0 4px 20px rgba(0,0,0,.3);
  --shadow-medium: 0 8px 30px rgba(0,0,0,.4);
  --shadow-strong: 0 12px 40px rgba(0,0,0,.6);
  --shadow-glow: 0 0 30px rgba(0, 212, 255, 0.4);

  --transition-fast: .2s ease;
  --transition-medium: .3s ease;
  --transition-slow: .5s ease;

  --font-primary: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-mono: 'Courier New', 'Monaco', monospace;

  /* Mapeamento local */
  --bg: var(--bg-dark);
  --bg-soft: var(--bg-card);
  --text: var(--text-white);
  --text-muted: var(--text-gray);
  --border: rgba(255,255,255,0.12);
  --card-bg: var(--bg-card);

  /* Campos com borda azul por padrão e hover/foco azuis */
  --field-border: color-mix(in oklab, var(--alarm-secondary) 70%, transparent);
  --field-border-hover: var(--alarm-secondary);
  --field-border-focus: var(--alarm-primary);

  --primary: var(--alarm-primary);
  --primary-hover: var(--alarm-secondary);
  --primary-contrast: var(--surface-color);
  --focus: var(--alarm-primary);
  --success: var(--alarm-success);
  --error: var(--alarm-danger);

  --radius: var(--radius-lg, 16px);
  --shadow: var(--shadow-soft);
}

[data-theme="light"]{
  --bg-dark: #ffffff;
  --bg-card: #ffffff;
  --text-white: #1e293b;
  --text-gray: #64748b;
  --alarm-primary: #0ea5e9;
  --alarm-secondary: #38bdf8;
  --alarm-accent: #f97316;
  --alarm-success: #10b981;
  --alarm-warning: #f59e0b;
  --alarm-danger: #ef4444;

  --gradient-primary: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 100%);
  --gradient-accent: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  --gradient-dark: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  --gradient-bg: #ffffff;

  --shadow-soft: 0 4px 20px rgba(15, 23, 42, 0.08);
  --shadow-medium: 0 8px 30px rgba(15, 23, 42, 0.12);
  --shadow-strong: 0 12px 40px rgba(15, 23, 42, 0.16);
  --shadow-glow: 0 0 30px rgba(14, 165, 233, 0.25);

  --bg: var(--bg-dark);
  --bg-soft: var(--bg-card);
  --card-bg: var(--bg-card);
  --text: var(--text-white);
  --text-muted: var(--text-gray);
  --border: #cbd5e1;

  /* Campos em claro: borda azul e hover azul forte */
  --field-border: #60a5fa;
  --field-border-hover: #3b82f6;
  --field-border-focus: var(--alarm-primary);
}

html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }

/* ===== Base ===== */
*,
*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--font-primary);
  color:var(--text);
  background: var(--gradient-bg);
  line-height:1.6;
}
a{ color:#00d4ff; text-decoration:none; transition:color var(--transition-fast); }
a:hover{ color:var(--primary-hover); text-decoration:underline; }
img{ max-width:100%; height:auto; }
.visually-hidden{ position:absolute!important; width:1px;height:1px; padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,1px,1px); white-space:nowrap;border:0; }

/* ===== Layout ===== */
.container{ width:min(800px, 100% - 2rem); margin-inline:auto; }
.site-header{ position:sticky; top:0; z-index:50; background:var(--bg); border-bottom:1px solid var(--border); backdrop-filter:saturate(180%) blur(6px); }
.header-inner{ display:flex; align-items:center; gap:1rem; padding:.75rem 0; }
.logo img{ display:block; }
.site-nav ul{ display:flex; gap:.75rem; list-style:none; padding:0;margin:0; }
.site-nav a{ display:inline-block; padding:.5rem .75rem; border-radius:calc(var(--radius) - 8px); }
.site-nav a:hover,.site-nav a:focus-visible{ background:var(--bg-soft); text-decoration:none; }

.theme-toggle{
  margin-left:auto; border:1px solid var(--border); background:var(--bg); color:var(--text);
  border-radius:999px; padding:.5rem .75rem; cursor:pointer;
  transition:background var(--transition-fast), border-color var(--transition-fast);
}
.theme-toggle:hover{ background:var(--bg-soft); border-color:var(--primary); }
.theme-toggle:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; box-shadow: var(--shadow-glow); }

.skip-link{ position:absolute; left:-9999px; }
.skip-link:focus{
  left:1rem; top:1rem; background:var(--primary); color:var(--primary-contrast);
  padding:.5rem .75rem; border-radius:calc(var(--radius) - 8px); z-index:100; box-shadow: var(--shadow-glow);
}

/* Breadcrumb */
.breadcrumb{ font-size:.9375rem; color:var(--text-muted); margin:1rem 0 .5rem; }
.breadcrumb ol{ display:flex; gap:.5rem; list-style:none; padding:0;margin:0; }
.breadcrumb li+li::before{ content:"›"; margin-right:.5rem; color:var(--text-muted); }

/* Página */
.page-header{ padding:1rem 0 1.25rem; }
.page-header h1{ margin:0 0 .4rem 0; font-size:clamp(1.5rem, 2.5vw, 2rem); }
.lead{ margin:0; color:var(--text-muted); }

/* Cartão de contato direto */
.card{
  background:var(--card-bg);
  border:1px solid rgba(0, 212, 255, 0.6);
  border-radius:var(--radius);
  padding:1rem;
  box-shadow:var(--shadow);
}
.card .note{ color:var(--text-muted); font-size:.9rem; margin:.25rem 0 0; }

/* ===== Formulário ===== */
.contact-form-section{ margin:1.5rem 0 3rem; }
.contact-form{
  background:var(--card-bg);
  border: 2px solid rgba(0, 212, 255, 0.6);
  border-radius:var(--radius);
  padding:1rem;
  box-shadow:var(--shadow);
  margin:1rem 0 ;
}

.grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:1rem; }
.form-field{ grid-column: span 6; }
.form-field.full{ grid-column: 1 / -1; }
@media (max-width: 720px){ .form-field{ grid-column: 1 / -1; } }

label{ display:inline-block; font-weight:600; margin-bottom:.375rem; }

/* Campos com borda azul (default/hover/foco) */
input[type="text"],input[type="email"],textarea{
  width:100%; padding:.65rem .75rem;
  border:1px solid rgba(0, 212, 255, 0.6);
  border-radius:calc(var(--radius) - 8px);
  background:var(--bg); color:var(--text);
  transition:border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-medium);
}
input[type="text"]:hover, input[type="email"]:hover, textarea:hover{
  border-color: var(--field-border-hover);
}
input::placeholder,textarea::placeholder{ color:var(--text-muted); }

/* Foco: azul consistente com a paleta */
input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--field-border-focus);
  outline-offset:1px;
  border-color:var(--field-border-focus);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--field-border-focus) 25%, transparent);
}

/* Inválidos: só quando tocados ou após submit (form validado) */
.contact-form[data-validated="true"] :invalid,
.contact-form input[data-touched="true"]:invalid,
.contact-form textarea[data-touched="true"]:invalid{
  border-color: var(--error);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--error) 22%, transparent);
}

/* Ajudas/legendas */
.form-note{ margin:0; color:var(--text-muted); font-size:.9rem; }
.small{ font-size:.9rem; }
.muted{ color:var(--text-muted); }

/* Ações do formulário */
.form-actions{ display:flex; align-items:center; gap:1rem; margin-top:.75rem; flex-wrap:wrap; }
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.7rem 1.05rem;
  background:var(--gradient-primary);
  color:var(--primary-contrast);
  border:1px solid transparent;
  border-radius:calc(var(--radius) - 8px);
  cursor:pointer; font-weight:700;
  box-shadow: var(--shadow), var(--shadow-glow);
  transition: transform var(--transition-fast), filter var(--transition-fast);
}
.btn-primary:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
  text-decoration:none;
}
.btn-primary:active{ transform: translateY(0); }
.btn-primary:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; box-shadow: var(--shadow-glow); }

/* ===== Botão Copiar ===== */
.btn-secondary.btn-copy{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.45rem .7rem;
  border-radius:calc(var(--radius) - 10px);
  cursor:pointer; font-weight:600;
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  border:1px solid var(--alarm-primary);
  background: var(--bg-soft);
  color: var(--text);
}
.btn-copy:hover{ border-color: var(--alarm-secondary); }
.btn-copy:active{ transform: translateY(1px) scale(.99); }

/* Estado copiado (ambos temas) */
.btn-copy[data-state="copied"]{
  background: linear-gradient(135deg, color-mix(in oklab, var(--success) 75%, transparent), color-mix(in oklab, var(--success) 55%, transparent));
  color: #052e16;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--success) 30%, transparent);
}

/* Modo claro: botão copiar com cor, hover e borda azul forte */
[data-theme="light"] .btn-secondary.btn-copy{
  background: var(--gradient-primary);
  color: #ffffff;
  border-color: #3b82f6;
  box-shadow: var(--shadow-soft);
}
[data-theme="light"] .btn-secondary.btn-copy:hover{
  filter: brightness(1.06);
}
[data-theme="light"] .btn-secondary.btn-copy[data-state="copied"]{
  background: linear-gradient(135deg, var(--alarm-success) 0%, color-mix(in oklab, var(--alarm-success) 70%, #22c55e) 100%);
  color: #052e16;
  border-color: #3b82f6;
}

/* Foco acessível no copiar */
.btn-copy:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:2px;
  box-shadow: var(--shadow-glow);
}

/* Rodapé */
.site-footer{ border-top:1px solid var(--border); background:var(--bg); padding:1.5rem 0; margin-top:3rem; }
.footer-inner{ display:grid; gap:1rem; }
.footer-nav ul{ display:flex; flex-wrap:wrap; gap:.75rem 1rem; list-style:none; padding:0;margin:0; }
.footer-nav a{ color:var(--text); transition:color var(--transition-fast); }
.footer-nav a:hover{ color:var(--primary); }
copyright,.copyright{ color:var(--text-muted); }

/* Acessibilidade */
:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }

/* Redução de movimento */
@media (prefers-reduced-motion: reduce){
  *{ animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}

/* Impressão */
@media print{
  .site-header, .site-footer, .theme-toggle, .breadcrumb { display:none!important; }
  .contact-form { border:none; box-shadow:none; }
}

/* Override: manter borda azul no hover/active/copiado do botão Copiar */
.btn-secondary.btn-copy:hover,
.btn-secondary.btn-copy:active,
.btn-secondary.btn-copy:focus-visible {
  border-color: var(--alarm-primary);
}

/* Quando estiver no estado 'copied', mantenha a borda azul também */
.btn-secondary.btn-copy[data-state="copied"]:hover,
.btn-secondary.btn-copy[data-state="copied"]:active,
.btn-secondary.btn-copy[data-state="copied"]:focus-visible {
  border-color: var(--alarm-primary);
}

/* Modo claro: usar o azul forte da paleta como borda em hover/active/copied */
[data-theme="light"] .btn-secondary.btn-copy:hover,
[data-theme="light"] .btn-secondary.btn-copy:active,
[data-theme="light"] .btn-secondary.btn-copy:focus-visible,
[data-theme="light"] .btn-secondary.btn-copy[data-state="copied"]:hover,
[data-theme="light"] .btn-secondary.btn-copy[data-state="copied"]:active,
[data-theme="light"] .btn-secondary.btn-copy[data-state="copied"]:focus-visible {
  border-color: var(--border-blue-strong, #3b82f6);
}