/* =========================================================
   StyleKit — Base de tokens (tema “base”)
   - Define o léxico canônico consumido por componentes/presets
   - Presets devem sobrescrever estes valores
   ========================================================= */

/* Paleta e tipografia base (modo claro por padrão) */
:root {
  /* Cores de página */
  --page-bg: #ffffff;
  --page-text: #0f172a;

  /* Links */
  --link: #0a66ff;
  --link-hover: #0847b7;

  /* Superfícies & bordas */
  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --border: #e5e7eb;
  --muted: #555555;

  /* Acento (token canônico) */
  --accent: #0a66ff;

  /* Compatibilidade com tokens legados usados no tema */
  --color-bg: var(--surface);
  --color-text: var(--page-text);
  --color-border: var(--border);
  --color-accent: var(--accent);

  /* Tipografia & escala */
  --font-family: Montserrat, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-size-base: 16px;
  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Raios e sombras */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 12px;
  --radius: var(--radius-md);
  --shadow-1: 0 4px 10px rgba(0,0,0,.08);
  --shadow-2: 0 6px 18px rgba(0,0,0,.08);

  /* Espaçamento */
  --gap: 16px;

  /* Botões (globais) */
  --btn-bg: var(--accent);
  --btn-text: #ffffff;
  --btn-hover-bg: var(--accent); /* presets podem escurecer */
  --btn-hover-text: #ffffff;
  --btn-radius: 8px;
  --btn-shadow: var(--shadow-1);

  /* Cartões (globais) */
  --card-bg: var(--surface);
  --card-border: var(--border);
  --card-radius: 12px;
  --card-title: var(--page-text);
  --card-region: var(--accent);
  --card-subtext: var(--muted);
  --card-dif-text: var(--page-text);

  /* Hero */
  --hero-title-color: var(--page-text);
  --hero-height-desktop: 520px;
  --hero-height-mobile: 340px;

  /* Header (usado pelo estilizador) */
  --header-bg: var(--surface);
  --header-text: var(--page-text);
  --header-border: 1px solid rgba(2,6,23,.06);
  --header-gap: 20px;

  /* Navegação (opcional) */
  --nav-link-color: var(--page-text);
  --nav-link-weight: 600;
  --nav-link-hover: var(--accent);
  --nav-link-active: var(--accent);

  /* Drawer & Backdrop (mobile) */
  --drawer-bg: var(--surface);
  --drawer-text: var(--page-text);
  --drawer-width: 320px;
  --drawer-shadow: 0 20px 40px rgba(0,0,0,.18);
  --backdrop-bg: rgba(0,0,0,.45);
}

/* Aplicação mínima global baseada nos tokens */
html {
  font-size: var(--font-size-base);
}
body {
  background: var(--page-bg);
  color: var(--page-text);
  font-family: var(--font-family);
}

a {
  color: var(--link);
  text-decoration: none;
}
a:hover {
  color: var(--link-hover);
  text-decoration: underline;
}

/* Botão genérico (para casos em que o tema base usa .btn) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap, 8px);
  padding: 10px 16px;
  border-radius: var(--btn-radius);
  background: var(--btn-bg);
  color: var(--btn-text);
  box-shadow: var(--btn-shadow);
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
}
.btn:hover {
  background: var(--btn-hover-bg);
  color: var(--btn-hover-text);
}

/* Helpers de superfícies (úteis para presets) */
.surface {
  background: var(--surface);
  color: var(--page-text);
}
.surface-2 {
  background: var(--surface-2);
  color: var(--page-text);
}

/* Borda utilitária */
.u-border {
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* Compatibilidade de títulos no Hero */
.hero .hero-title,
.home-hero .hero-title,
.site-hero .hero-title {
  color: var(--hero-title-color);
}

/* Ajustes básicos para imagens responsivas */
img {
  max-width: 100%;
  height: auto;
  display: block;
}