/* ============================================================
   HANE — Sistema de design compartilhado (PREVIEW)
   Carregar DEPOIS de style.css. Redefine os tokens existentes
   (--primary, --card-bg, --border, --text-muted, --radius, --font)
   com o novo sistema claro/escuro e re-skina header/nav/botões.
   Assim Demo e Dashboard padronizam sem reescrever a CSS funcional.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500;600;700;800&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ── Tokens — tema CLARO (padrão) ── */
:root {
  /* nomes legados (compat com style.css e páginas atuais) */
  --bg: #FAFBFC;
  --bg-alt: #F2F4F7;
  --primary: #0E7490;
  --primary-dark: #0A5F77;
  --text: #15181C;
  --text-muted: #5A6573;
  --border: #E6E9ED;
  --card-bg: #FFFFFF;
  --radius: 12px;
  --font: 'Schibsted Grotesk', system-ui, sans-serif;

  /* nomes novos */
  --ground: var(--bg);
  --paper: var(--card-bg);
  --line: var(--border);
  --muted: var(--text-muted);
  --faint: #97A1AE;
  --accent: var(--primary);
  --accent-hover: var(--primary-dark);
  --accent-soft: #E2F1F5;
  --on-accent: #FFFFFF;
  --grid: rgba(21,24,28,.05);
  --shadow: 0 24px 56px -30px rgba(21,24,28,.28);
  --shadow-sm: 0 2px 14px -8px rgba(21,24,28,.22);
  --display: 'Schibsted Grotesk', system-ui, sans-serif;
  --serif: 'Newsreader', Georgia, serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* ── Tokens — tema ESCURO (identidade HANEIA) ── */
[data-theme="dark"] {
  --bg: #0C1118;
  --bg-alt: #0F1726;
  --primary: #00D4FF;
  --primary-dark: #2FE0FF;
  --text: #E7ECF2;
  --text-muted: #8A97A8;
  --border: #1F2A3A;
  --card-bg: #121A26;

  --faint: #5A6678;
  --accent-soft: rgba(0,212,255,.10);
  --on-accent: #07121C;
  --grid: rgba(255,255,255,.04);
  --shadow: 0 26px 60px -30px rgba(0,0,0,.7);
  --shadow-sm: 0 2px 16px -8px rgba(0,0,0,.6);
}

/* ── Base ── */
body { font-family: var(--font); background: var(--bg); color: var(--text); transition: background .35s ease, color .35s ease; }
h1, h2, h3 { font-family: var(--display); letter-spacing: -0.02em; }
::selection { background: var(--accent); color: var(--on-accent); }

/* ── Header / nav ── */
header { border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.1) blur(8px); }
header.scrolled { background: color-mix(in srgb, var(--bg) 92%, transparent); box-shadow: var(--shadow-sm); }
.logo { font-family: var(--display); font-weight: 800; letter-spacing: -0.02em; color: var(--text); text-decoration: none; }
nav a { font-family: var(--display); color: var(--text-muted); font-weight: 500; transition: color .18s; }
nav a:hover { color: var(--text); }
.menu-toggle span { background: var(--text); }

/* botões base */
.btn { font-family: var(--display); font-weight: 600; background: var(--accent); color: var(--on-accent); border: none; border-radius: 8px; transition: background .18s, transform .15s; }
.btn:hover { background: var(--accent-hover); transform: translateY(-1px); color: var(--on-accent); }

/* ── Componentes novos ── */
.nav-entrar { font-family: var(--display); font-weight: 600; font-size: 0.9rem; color: var(--text); text-decoration: none; transition: color .18s; }
.nav-entrar:hover { color: var(--accent); }

.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); }
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--accent); display: inline-block; }

.theme-btn { width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: color .18s, border-color .18s; flex-shrink: 0; }
.theme-btn:hover { color: var(--text); border-color: var(--accent); }
.theme-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-btn .moon { display: none; } .theme-btn .sun { display: block; }
[data-theme="dark"] .theme-btn .moon { display: block; } [data-theme="dark"] .theme-btn .sun { display: none; }