/* JR TOMBO LP · base.css — reset + variaveis + tipografia */

*,*::before,*::after { box-sizing: border-box; }
html,body { margin:0; padding:0; }
img,svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; }
ul { list-style:none; padding:0; margin:0; }

:root {
  /* paleta */
  --bg-0: #04020F;
  --bg-1: #0B0820;
  --bg-2: #13102A;
  --ink-0: #F5F4FF;
  --ink-1: #B8B5D1;
  --ink-2: #6B6890;
  --purple: #5B21B6;
  --purple-hi: #7C3AED;
  --purple-lo: #3B0F8B;
  --gold: #F59E0B;
  --gold-hi: #FCD34D;
  --danger: #DC2626;
  --ok: #10B981;
  --line: rgba(124,58,237,.28);
  --line-soft: rgba(124,58,237,.14);

  /* fontes */
  --display: 'Barlow Condensed', system-ui, -apple-system, sans-serif;
  --mono: 'Share Tech Mono', ui-monospace, 'Cascadia Code', Menlo, monospace;
  --body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* layout */
  --max: 1180px;
  --radius: 12px;
}

html { scroll-behavior: smooth; }

body {
  background:
    radial-gradient(ellipse 80% 50% at 20% 0%, rgba(91,33,182,.25), transparent 60%),
    radial-gradient(ellipse 60% 40% at 90% 30%, rgba(245,158,11,.08), transparent 60%),
    var(--bg-0);
  color: var(--ink-0);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
}

.container { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

h1, h2, h3, h4 {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .005em;
  line-height: .95;
  margin: 0;
  font-weight: 800;
}

h1 { font-size: clamp(40px, 7vw, 84px); }
h2 { font-size: clamp(32px, 5vw, 56px); }
h3 { font-size: clamp(20px, 2.5vw, 28px); }

p { margin: 0 0 16px 0; color: var(--ink-1); }

.meta {
  font-family: var(--mono);
  color: var(--ink-2);
  letter-spacing: .12em;
  font-size: 11px;
  text-transform: uppercase;
}

.gold { color: var(--gold); }
.purple { color: var(--purple-hi); }
.muted { color: var(--ink-2); }

::selection { background: var(--purple); color: var(--ink-0); }

/* focus visivel */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }