/* ============================================================
   DIEGO ROGER — Design System Tokens
   Premium dark / cinematic / high-contrast / amber accent
   ============================================================ */

@font-face { font-family: 'Bebas Neue'; font-style: normal; font-weight: 400; font-display: swap; src: url('ui_kits/landing/vendor/bebas.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap; src: url('ui_kits/landing/vendor/inter-300.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('ui_kits/landing/vendor/inter-400.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('ui_kits/landing/vendor/inter-500.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('ui_kits/landing/vendor/inter-600.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('ui_kits/landing/vendor/inter-700.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url('ui_kits/landing/vendor/inter-800.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 900; font-display: swap; src: url('ui_kits/landing/vendor/inter-900.ttf') format('truetype'); }

:root {
  /* ---------- PRIMITIVE COLORS ---------- */
  /* Blacks — fundo principal e camadas */
  --black-900: #050505;   /* hero, body */
  --black-800: #0a0a0a;   /* sections */
  --black-700: #111111;   /* cards, quiz, sessões internas */
  --black-600: #181818;   /* hover bg, raised */
  --black-500: #1f1f1f;   /* borders dark */

  /* Cinzas — texto secundário e borders */
  --gray-400: #2a2a2a;    /* borders */
  --gray-300: #3a3a3a;    /* divider */
  --gray-200: #7a7a7a;    /* muted text */
  --gray-100: #b8b8b8;    /* subtítulos, descrições */

  /* Branco */
  --white: #ffffff;
  --white-90: rgba(255, 255, 255, 0.9);
  --white-60: rgba(255, 255, 255, 0.6);
  --white-20: rgba(255, 255, 255, 0.12);

  /* Amarelo — cor de marca (atenção, CTA, highlight) */
  --amber-500: #f5b400;   /* primary brand */
  --amber-400: #ffc83d;   /* hover lift */
  --amber-600: #d99a00;   /* pressed */
  --amber-300: #ffd76b;   /* glow tint */
  --amber-glow: rgba(245, 180, 0, 0.35);
  --amber-glow-soft: rgba(245, 180, 0, 0.15);
  --amber-highlight: rgba(245, 180, 0, 0.85); /* marca-texto */

  /* Verde — conversão / resultados positivos */
  --green-500: #00d26a;
  --green-400: #2eea88;
  --green-glow: rgba(0, 210, 106, 0.35);

  /* Vermelho — perda / objeção / "sem tráfego" */
  --red-500: #ff3b3b;
  --red-glow: rgba(255, 59, 59, 0.3);

  /* ---------- SEMANTIC ---------- */
  --bg-page:        var(--black-900);
  --bg-section:     var(--black-800);
  --bg-card:        var(--black-700);
  --bg-card-raised: var(--black-600);
  --bg-input:       var(--black-700);

  --fg-primary:   var(--white);
  --fg-secondary: var(--gray-100);
  --fg-muted:     var(--gray-200);
  --fg-on-amber:  var(--black-900);

  --accent:        var(--amber-500);
  --accent-hover:  var(--amber-400);
  --accent-press:  var(--amber-600);
  --positive:      var(--green-500);
  --negative:      var(--red-500);

  --border-subtle: var(--gray-400);
  --border-strong: var(--gray-300);
  --border-accent: var(--amber-500);

  /* ---------- TYPOGRAPHY ---------- */
  --font-display: "Bebas Neue", "Anton", "Impact", sans-serif;
  --font-display-alt: "Anton", "Bebas Neue", sans-serif;
  --font-body: "Inter", "Poppins", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Display scale — uppercase, tight tracking, heavy */
  --display-1: 96px;  /* hero headline */
  --display-2: 72px;  /* sessão "Atenção é Moeda" */
  --display-3: 56px;  /* section titles */
  --display-4: 40px;  /* card titles, big numbers */

  /* Body scale */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;

  --leading-tight: 0.95;
  --leading-snug:  1.1;
  --leading-body:  1.55;

  --tracking-display: 0.005em;  /* leve */
  --tracking-eyebrow: 0.18em;   /* UPPERCASE labels */
  --tracking-body:    0;

  /* ---------- SPACING ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ---------- RADII ---------- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;   /* cards default */
  --radius-lg:   18px;   /* large cards */
  --radius-xl:   28px;   /* hero shells */
  --radius-pill: 999px;  /* buttons */

  /* ---------- SHADOWS & GLOW ---------- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.7);

  --glow-amber-sm: 0 0 24px var(--amber-glow-soft);
  --glow-amber-md: 0 0 48px var(--amber-glow);
  --glow-amber-lg: 0 0 120px var(--amber-glow);
  --glow-green:    0 0 32px var(--green-glow);

  /* Card glow — discrete amber border + inner depth */
  --card-glow: 0 0 0 1px rgba(245, 180, 0, 0.08), 0 12px 40px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  --card-glow-hover: 0 0 0 1px rgba(245, 180, 0, 0.35), 0 16px 50px rgba(0, 0, 0, 0.7), 0 0 32px var(--amber-glow-soft);

  /* ---------- MOTION ---------- */
  --ease-cinematic: cubic-bezier(0.16, 1, 0.3, 1);   /* premium ease-out */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 600ms;
  --dur-reveal: 900ms;
}

/* ============================================================
   SEMANTIC TYPE STYLES
   ============================================================ */

.dr-display-1, h1.hero {
  font-family: var(--font-display);
  font-size: var(--display-1);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--fg-primary);
  font-weight: 400;
}

.dr-display-2 {
  font-family: var(--font-display);
  font-size: var(--display-2);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--fg-primary);
}

.dr-display-3, h2 {
  font-family: var(--font-display);
  font-size: var(--display-3);
  line-height: var(--leading-snug);
  text-transform: uppercase;
  color: var(--fg-primary);
}

.dr-display-4, h3 {
  font-family: var(--font-display);
  font-size: var(--display-4);
  line-height: var(--leading-snug);
  text-transform: uppercase;
  color: var(--fg-primary);
}

.dr-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--amber-500);
}

.dr-lead {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  color: var(--fg-secondary);
  font-weight: 400;
}

.dr-body, p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--fg-secondary);
}

.dr-small {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--fg-muted);
}

/* Highlight de palavra-chave — amarelo sólido (estilo manchete) */
.dr-mark {
  color: var(--amber-500);
}

/* Highlight com fundo amarelo "marca-texto" (estilo Jornal do Mercado) */
.dr-highlight {
  background: var(--amber-highlight);
  color: var(--black-900);
  padding: 0.04em 0.18em 0.08em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Underline amarelo curto, estilo "eyebrow" */
.dr-underline {
  position: relative;
  display: inline-block;
}
.dr-underline::after {
  content: "";
  position: absolute;
  left: 0; bottom: -8px;
  width: 56px; height: 3px;
  background: var(--amber-500);
}