/* ============================================================
   Procurando Neve / Chasing Snow — Design System entry point
   Consumers link THIS one file. Imports only.
   ============================================================ */
@import url('tokens/fonts.css');
@import url('tokens/colors.css');
@import url('tokens/typography.css');
@import url('tokens/spacing.css');
@import url('tokens/base.css');
@import url('tokens/responsive.css');

/* ============================================================
   NEUMORPHISM (experimento pn-neo, porta 4311) — soft UI.
   Camada por cima dos tokens: os componentes continuam lendo os
   mesmos var(); aqui só mudamos o material (fundo azul-acinzentado,
   dupla sombra clara/escura, cantos maiores, inset nos afundados).
   Tema escuro permanece o navy oficial — as sombras neumórficas
   adaptam via --neo-hi/--neo-lo, que cada tema define.
   ============================================================ */

/* -- Sombras e raios valem nos DOIS temas (via indireção --neo-*) -- */
:root {
  --neo-hi: rgba(255, 255, 255, 0.92);   /* luz: topo-esquerda */
  --neo-lo: rgba(163, 177, 198, 0.60);   /* sombra: baixo-direita */
  --neo-accent: #7c6df2;                 /* acento roxo/violeta da referência */
  --neo-grad-violet: linear-gradient(135deg, #8d7bf6 0%, #6355e0 100%);

  --shadow-xs: -2px -2px 5px var(--neo-hi), 2px 2px 5px var(--neo-lo);
  --shadow-sm: -3px -3px 8px var(--neo-hi), 4px 4px 9px var(--neo-lo);
  --shadow-md: -5px -5px 12px var(--neo-hi), 6px 6px 14px var(--neo-lo);
  --shadow-lg: -7px -7px 16px var(--neo-hi), 9px 9px 20px var(--neo-lo);
  --shadow-xl: -9px -9px 22px var(--neo-hi), 12px 12px 28px var(--neo-lo);
  --shadow-inset: inset 2px 2px 6px var(--neo-lo), inset -2px -2px 6px var(--neo-hi);

  /* cantos bem arredondados (16–24px na referência) */
  --r-xs: 9px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 22px;
  --r-xl: 28px;
}

/* -- Material claro: azul-acinzentado #dde3ec→#e8eef6, sem branco puro -- */
html:not([data-theme="dark"]) {
  --snow-0:   #e7ecf6;   /* superfície de cartão (um fio mais clara que o fundo) */
  --snow-50:  #e2e8f2;   /* fundo de página */
  --snow-100: #dbe2ee;   /* preenchimento suave */
  --snow-150: #d4dcea;   /* hover neutro */
  --snow-200: rgba(163, 177, 198, 0.35);  /* hairline */
  --snow-300: rgba(139, 155, 180, 0.55);  /* divisores */

  --blue-50:  #dfe9f7;   /* fill ativo/selecionado sobre o material acinzentado */

  --surface-sunk:     #d5dde9;
  --surface-bar:      rgba(226, 232, 242, 0.88);
  --surface-nav:      rgba(231, 236, 246, 0.96);
  --surface-grad-top: #edf1f9;
  --nav-active-bg:    var(--neo-grad-violet);
  --rank-silver-bg:   #dde3ee;
  --rank-neutral-badge: #e7ecf6;
}

/* -- Tema escuro: superfícies navy oficiais; só a luz/sombra adapta -- */
html[data-theme="dark"] {
  --neo-hi: rgba(255, 255, 255, 0.05);
  --neo-lo: rgba(0, 0, 0, 0.55);
  --nav-active-bg: var(--neo-grad-violet);
}

/* -- Barra de navegação inferior (mobile): flutua sem risco de borda -- */
.pn-appnav { border-top: 0 !important; box-shadow: 0 -8px 20px -6px var(--neo-lo); }
.pn-appnav button[aria-current="page"] {
  box-shadow: -2px -2px 6px var(--neo-hi), 3px 3px 9px var(--neo-lo);
}

/* -- Sidebar (desktop): mesma ideia, luz no lugar do risco divisório -- */
.pnd-side { border-right: 0 !important; box-shadow: 8px 0 22px -10px var(--neo-lo); }
.pnd-side nav button[aria-current="page"] {
  box-shadow: -2px -2px 6px var(--neo-hi), 3px 3px 9px var(--neo-lo);
}

/* -- Medidores (GaugePanel): poço afundado onde os anéis assentam -- */
.pn-gauges {
  background: var(--surface-sunk);
  border-radius: 20px;
  box-shadow: var(--shadow-inset);
  padding: 10px 6px 8px;
}

/* -- Inputs afundados (inset), padrão soft UI -- */
.pn-app input:not([type="checkbox"]):not([type="radio"]),
.pn-app select, .pn-app textarea,
.pnd-app input:not([type="checkbox"]):not([type="radio"]),
.pnd-app select, .pnd-app textarea {
  background: var(--surface-sunk) !important;
  border-color: transparent !important;
  box-shadow: var(--shadow-inset) !important;
}

/* -- Zebra do hora-a-hora: leitura neumórfica SEM perder contraste.
      As cores (navy + letras brancas, aprovadas pelo dono) ficam como
      estão nos index*.html; aqui só o acabamento afundado. -- */
.pn-zebra-col {
  border-radius: 7px;
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.30);
}

/* ===== BRILHO NEUMÓRFICO (ordem do dono 2026-08-14) =====
   Halo suave e luminoso atrás dos cartões-chave da home (seletor, mapa-múndi,
   cartões do guia, atalho "O que levar") — aplicado via className="pn-glow";
   os elementos que o recebem tiveram o box-shadow inline removido (inline vence classe). */
.pn-glow { box-shadow: 0 0 0 1px var(--border-hair), 0 10px 26px -14px rgba(14, 29, 61, 0.35), 0 22px 48px -20px rgba(124, 109, 242, 0.42), 0 6px 60px -14px rgba(66, 146, 214, 0.30); }
html[data-theme="dark"] .pn-glow { box-shadow: 0 0 0 1px rgba(124, 109, 242, 0.26), 0 10px 26px -14px rgba(0, 0, 0, 0.55), 0 24px 52px -18px rgba(124, 109, 242, 0.50), 0 6px 66px -12px rgba(58, 140, 230, 0.40); }