/* Hexember — design tokens e base compartilhada (landing + app) */
:root {
  --bg: #0b0907;
  --bg-2: #120f0c;
  --surface: #17130f;
  --surface-2: #1e1914;
  --line: rgba(255, 232, 205, .11);
  --line-strong: rgba(255, 232, 205, .22);
  --text: #f4ede3;
  --muted: #a89d8e;
  --faint: #6e655a;
  --ember: #ff5a1f;
  --flame: #ff8a2b;
  --gold: #ffc94d;
  --deep: #b3180f;
  --ok: #8fd0a6;
  --font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --font-ui: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --ease: cubic-bezier(.2, .7, .1, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-ui); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.skip { position: absolute; left: 12px; top: -60px; background: var(--gold); color: #1a1208; padding: 10px 14px; border-radius: 8px; z-index: 100; }
.skip:focus { top: 12px; }

.btn {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer; text-decoration: none;
  padding: 14px 22px; border-radius: 999px; border: 1px solid var(--line-strong);
  background: transparent; font-weight: 500; font-size: 15px; letter-spacing: .01em;
  transition: transform .25s var(--ease), background .25s, border-color .25s, color .25s;
}
.btn:hover { transform: translateY(-2px); border-color: var(--text); }
.btn--fire { background: linear-gradient(180deg, var(--flame), var(--ember)); border-color: transparent; color: #1c0a02; font-weight: 600; box-shadow: 0 10px 40px -12px rgba(255, 90, 31, .7); }
.btn--fire:hover { border-color: transparent; box-shadow: 0 16px 50px -10px rgba(255, 110, 40, .85); }
.btn svg { width: 16px; height: 16px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}