/* Tokens compartilhados do Orca. Importe em toda pagina.
   Painel e site seguem a linguagem do FleckMart (plataforma do Hugo): tema
   escuro indigo em oklch, Inter, elevacao = superficie mais clara. As
   paginas publicas (proposta e loja) usam os temas por cliente abaixo. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  color-scheme: dark;
  --font-ui: 'Inter', 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;

  /* Fundo e superficies (3 elevacoes) */
  --bg: oklch(0.16 0.012 272);
  --bg-2: oklch(0.18 0.013 272);
  --surface: oklch(0.205 0.014 272);
  --surface-2: oklch(0.245 0.016 272);
  --surface-3: oklch(0.295 0.02 272);
  --line: oklch(0.30 0.018 272);
  --line-2: oklch(0.385 0.022 272);
  --side-bg: oklch(0.13 0.012 272);
  --side-ink: oklch(0.7 0.018 272);

  /* Texto */
  --ink: oklch(0.95 0.008 272);
  --ink-2: oklch(0.74 0.018 272);
  --ink-3: oklch(0.60 0.02 272);

  /* Marca (indigo) e estados */
  --brand: oklch(0.585 0.215 277);
  --brand-strong: oklch(0.52 0.24 277);
  --brand-2: oklch(0.72 0.15 277);
  --brand-soft: oklch(0.585 0.215 277 / 0.16);
  --brand-soft-strong: oklch(0.585 0.215 277 / 0.28);
  --brand-soft-ink: oklch(0.82 0.1 277);
  --accent: oklch(0.72 0.16 300);
  --success: oklch(0.76 0.15 160);
  --success-soft: oklch(0.76 0.15 160 / 0.14);
  --warning: oklch(0.81 0.14 75);
  --warning-soft: oklch(0.81 0.14 75 / 0.14);
  --danger: oklch(0.68 0.19 22);
  --danger-strong: oklch(0.58 0.21 25);
  --danger-soft: oklch(0.68 0.19 22 / 0.15);
  --info: oklch(0.76 0.12 215);
  --info-soft: oklch(0.76 0.12 215 / 0.14);
  --whatsapp: #25d366;

  /* Aliases com os nomes do FleckMart, pra copiar regra de la sem traduzir */
  --border: var(--line);
  --border-strong: var(--line-2);
  --muted: var(--ink-2);
  --faint: var(--ink-3);
  --primary: var(--brand);
  --primary-strong: var(--brand-strong);
  --primary-bright: var(--brand-2);
  --primary-soft: var(--brand-soft);
  --primary-soft-strong: var(--brand-soft-strong);
  --primary-soft-ink: var(--brand-soft-ink);

  /* Sidebar e véus: o que muda de cor por tema e não cabe nos tokens acima */
  --side-title: #fff;
  --side-hover: rgba(255, 255, 255, 0.06);
  --side-line: rgba(255, 255, 255, 0.08);
  --backdrop: rgba(5, 6, 12, 0.62);
  --knob: #fff;

  --radius-s: 8px;
  --radius: 12px;
  --radius-l: 16px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 12px 36px rgba(0, 0, 0, 0.45);
  --ring: 0 0 0 3px oklch(0.585 0.215 277 / 0.32);
  --glow: 0 0 0 1px oklch(0.585 0.215 277 / 0.35), 0 0 40px oklch(0.585 0.215 277 / 0.18);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 150ms;
  --t: 220ms;
  --t-slow: 520ms;
}

/* Modo claro do painel. Entra por [data-mode='light'] no <html> (theme.js
   decide antes do primeiro paint; padrão é claro). Mesma escala de cinza
   fria do índigo, superfície branca, borda de fio de cabelo e sombra leve:
   elevação aqui é sombra, não superfície mais clara. As páginas públicas
   (proposta e loja) ignoram isto — elas têm os temas --p-* por cliente. */
[data-mode='light'] {
  color-scheme: light;
  --bg: oklch(0.975 0.004 272);
  --bg-2: oklch(0.962 0.005 272);
  --surface: oklch(1 0 0);
  --surface-2: oklch(0.968 0.005 272);
  --surface-3: oklch(0.935 0.008 272);
  --line: oklch(0.912 0.007 272);
  --line-2: oklch(0.86 0.01 272);
  --side-bg: oklch(0.985 0.003 272);
  --side-ink: oklch(0.40 0.02 272);
  --side-title: oklch(0.18 0.02 272);
  --side-hover: oklch(0.585 0.215 277 / 0.06);
  --side-line: oklch(0.912 0.007 272);
  --backdrop: oklch(0.2 0.02 272 / 0.42);
  --knob: #fff;

  --ink: oklch(0.19 0.02 272);
  --ink-2: oklch(0.42 0.02 272);
  --ink-3: oklch(0.56 0.018 272);

  --brand: oklch(0.53 0.22 277);
  --brand-strong: oklch(0.46 0.23 277);
  --brand-2: oklch(0.5 0.2 277);
  --brand-soft: oklch(0.585 0.215 277 / 0.1);
  --brand-soft-strong: oklch(0.585 0.215 277 / 0.18);
  --brand-soft-ink: oklch(0.42 0.2 277);
  --accent: oklch(0.58 0.18 300);
  --success: oklch(0.55 0.15 160);
  --success-soft: oklch(0.7 0.15 160 / 0.14);
  --warning: oklch(0.6 0.15 70);
  --warning-soft: oklch(0.8 0.14 75 / 0.18);
  --danger: oklch(0.55 0.2 25);
  --danger-strong: oklch(0.48 0.21 25);
  --danger-soft: oklch(0.68 0.19 22 / 0.1);
  --info: oklch(0.55 0.12 215);
  --info-soft: oklch(0.76 0.12 215 / 0.14);

  --shadow-1: 0 1px 2px oklch(0.2 0.02 272 / 0.06), 0 1px 3px oklch(0.2 0.02 272 / 0.04);
  --shadow-2: 0 12px 32px oklch(0.2 0.02 272 / 0.12), 0 2px 6px oklch(0.2 0.02 272 / 0.06);
  --ring: 0 0 0 3px oklch(0.585 0.215 277 / 0.22);
  --glow: 0 1px 2px oklch(0.2 0.02 272 / 0.08), 0 10px 30px oklch(0.585 0.215 277 / 0.22);
}
[data-mode='dark'] { color-scheme: dark; }

/* Temas da proposta e da loja. Aplicar em [data-theme] no <html> ou no wrapper. */
[data-theme='noir'] { --p-bg: #0a0a0b; --p-bg-2: #131315; --p-surface: #17171a; --p-ink: #f4f1ea; --p-ink-2: #b9b4a8; --p-ink-3: #7d786e; --p-line: rgba(244, 241, 234, 0.1); --p-accent: #e3b95b; --p-accent-ink: #1a1405; color-scheme: dark; }
[data-theme='marfim'] { --p-bg: #f6f1e8; --p-bg-2: #efe7da; --p-surface: #fffdf8; --p-ink: #1c1a17; --p-ink-2: #5a544b; --p-ink-3: #8d8578; --p-line: rgba(28, 26, 23, 0.1); --p-accent: #8a5a2b; --p-accent-ink: #fff8ef; color-scheme: light; }
[data-theme='oceano'] { --p-bg: #071a2b; --p-bg-2: #0b2540; --p-surface: #0e2c4a; --p-ink: #e8f1ff; --p-ink-2: #a9bdd6; --p-ink-3: #6f87a3; --p-line: rgba(232, 241, 255, 0.1); --p-accent: #4fd1ff; --p-accent-ink: #04202f; color-scheme: dark; }
[data-theme='esmeralda'] { --p-bg: #06201a; --p-bg-2: #0a2b23; --p-surface: #0d352b; --p-ink: #eaf7f1; --p-ink-2: #a8cdbd; --p-ink-3: #6f9686; --p-line: rgba(234, 247, 241, 0.1); --p-accent: #38d39f; --p-accent-ink: #032a1c; color-scheme: dark; }
[data-theme='terracota'] { --p-bg: #f3e7dd; --p-bg-2: #ecdccd; --p-surface: #fbf4ee; --p-ink: #2b1a12; --p-ink-2: #6b5044; --p-ink-3: #9c7f70; --p-line: rgba(43, 26, 18, 0.1); --p-accent: #c2552d; --p-accent-ink: #fff5ef; color-scheme: light; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-ui); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, svg, video { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
.num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Scrollbar discreta, coerente com o tema */
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* Autofill sem flash branco */
input:-webkit-autofill, input:-webkit-autofill:focus { -webkit-text-fill-color: var(--ink); -webkit-box-shadow: 0 0 0 100px var(--surface-2) inset; caret-color: var(--ink); }

/* Reveal ao rolar: adicione .reveal; JS troca para .is-visible */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}