/* base.css — JWK Digital Branding | Reset, CSS tokens e utilidades base */

/* ── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

/* ── Design Tokens ──────────────────────────────────────────────────────── */
:root {
  --bg-base:        #0A0D10;
  --bg-surface:     #0F1318;
  --bg-elevated:    #151A21;
  --bg-border:      #1E2530;
  --amber:          #F5A623;
  --amber-dim:      rgba(245,166,35,.10);
  --amber-b:        rgba(245,166,35,.20);
  --blue:           #6FA3D8;
  --blue-dim:       rgba(111,163,216,.10);
  --text-primary:   #F0EBE3;
  --text-secondary: #8A8F99;
  --text-muted:     #4A5060;
  --font-serif:     'DM Serif Display', Georgia, serif;
  --font-sans:      'Inter', system-ui, sans-serif;
  --font-mono:      'JetBrains Mono', monospace;
  --ease:           .25s ease;
  --spring:         cubic-bezier(.16,1,.3,1);
  --ease-slow:      cubic-bezier(.16,1,.3,1);
  --ease-medium:    cubic-bezier(.4,0,.2,1);
  --radius-lg:      18px;
  --radius-md:      12px;
}

/* ── Base Body ──────────────────────────────────────────────────────────── */
body {
  font-family: var(--font-sans);
  background: var(--bg-base);
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── Selection ──────────────────────────────────────────────────────────── */
::selection {
  background: var(--amber-dim);
  color: var(--text-primary);
}

/* ── Reveal Animation ───────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s var(--spring), transform .6s var(--spring);
}
.reveal.visible {
  opacity: 1;
  transform: none;
}