/* =========================================================
   PALMEIRAS · DESIGN TOKENS
   Sincronizado com designSystem.html v1.0
   ========================================================= */

:root {
  /* ---- Cores · Brand ---- */
  --verde:        #006437;
  --verde-deep:   #003D22;
  --verde-pitch:  #00200F;
  --verde-neon:   #00E07A;

  /* ---- Cores · Neutros ---- */
  --pitch:        #0A0A0A;
  --carbon:       #131313;
  --graphite:     #1A1A1A;
  --steel:        #2A2A2A;
  --ash:          #5A5A5A;
  --fog:          #8A8A8A;
  --mist:         #BFBFBF;
  --bone:         #E8E6DC;
  --paper:        #F4F4EE;
  --white:        #FFFFFF;

  /* ---- Cores · Accent ---- */
  --gold:         #C9A24A;
  --gold-deep:    #8B6E2A;

  /* ---- Cores · Semantic ---- */
  --success:      #00E07A;
  --warning:      #F2B341;
  --danger:       #E0413B;

  /* ---- Tipografia ---- */
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-sans:    "Manrope", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* Escala tipográfica */
  --t-xs:   0.75rem;
  --t-sm:   0.875rem;
  --t-base: 1rem;
  --t-md:   1.25rem;
  --t-lg:   1.5rem;
  --t-xl:   2rem;
  --t-2xl:  3rem;
  --t-3xl:  4.5rem;
  --t-4xl:  7.5rem;
  --t-5xl:  12.5rem;

  /* ---- Espaçamento (escala 4) ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;
  --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --s-10: 128px;

  /* ---- Raio ---- */
  --r-0: 0;    --r-1: 2px;  --r-2: 4px;
  --r-3: 8px;  --r-4: 12px; --r-full: 999px;

  /* ---- Sombras ---- */
  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 8px 24px rgba(0,0,0,.45);
  --sh-glow: 0 0 0 1px var(--verde-neon), 0 0 24px rgba(0,224,122,.35);

  /* ---- Layout ---- */
  --max:    1280px;
  --gutter: 24px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --ease-in:  cubic-bezier(.7,0,.84,0);
  --dur-1: 120ms; --dur-2: 240ms; --dur-3: 480ms; --dur-4: 800ms;
}

/* =========================================================
   Reset & base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: 1.55;
  color: var(--bone);
  background: var(--pitch);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Grain global */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.9'/></svg>");
}

::selection { background: var(--verde-neon); color: var(--verde-pitch); }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img, svg { display: block; max-width: 100%; }

/* =========================================================
   Tipografia base
   ========================================================= */
.h-display,
.h1, .h2, .h3 {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  letter-spacing: -.01em;
  text-transform: uppercase;
  line-height: .88;
  margin: 0;
  color: var(--paper);
}
.h1 { font-size: clamp(3.5rem, 9vw, var(--t-4xl)); }
.h2 { font-size: clamp(2.25rem, 6vw, var(--t-3xl)); }
.h3 { font-size: clamp(1.5rem, 3vw, var(--t-2xl)); }

.kicker {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--verde-neon);
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--fog);
}
.lead { font-size: var(--t-md); color: var(--mist); max-width: 60ch; }
.muted { color: var(--fog); }
.mono { font-family: var(--font-mono); }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* =========================================================
   Componentes base (botões, chips, cards do DS)
   ========================================================= */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-3);
  padding: 14px 22px;
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  font-size: var(--t-base); letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid transparent;
  transition: all var(--dur-2) var(--ease-out);
  position: relative; overflow: hidden;
  cursor: pointer;
}
.btn .arr {
  width: 16px; height: 1px; background: currentColor; position: relative;
  transition: width var(--dur-2) var(--ease-out);
}
.btn .arr::after {
  content: ""; position: absolute; right: 0; top: -3px;
  width: 7px; height: 7px;
  border-right: 1px solid currentColor; border-top: 1px solid currentColor;
  transform: rotate(45deg);
}
.btn:hover .arr { width: 26px; }

.btn--primary  { background: var(--verde-neon); color: var(--verde-pitch); }
.btn--primary:hover { background: var(--paper); }
.btn--secondary { background: transparent; color: var(--paper); border-color: var(--paper); }
.btn--secondary:hover { background: var(--paper); color: var(--verde-pitch); }
.btn--ghost { background: transparent; color: var(--mist); border-color: var(--steel); }
.btn--ghost:hover { color: var(--verde-neon); border-color: var(--verde-neon); }
.btn--dark { background: var(--pitch); color: var(--verde-neon); border-color: var(--verde-neon); }
.btn--dark:hover { background: var(--verde-neon); color: var(--verde-pitch); }
.btn--lg { padding: 22px 32px; font-size: var(--t-md); }
.btn--sm { padding: 10px 16px; font-size: var(--t-sm); }
.btn[disabled] { opacity: .35; pointer-events: none; }

.chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 6px 12px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  border-radius: var(--r-full);
  border: 1px solid var(--steel); color: var(--mist);
  background: var(--carbon);
}
.chip--solid   { background: var(--verde-neon); color: var(--verde-pitch); border-color: transparent; }
.chip--hashtag { background: var(--verde-deep); color: var(--paper); border-color: var(--verde); }
.chip--gold    { background: transparent; color: var(--gold); border-color: var(--gold); }
.chip--live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 8px var(--danger);
  animation: pulse 1.4s infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(.7); opacity: .55; }
}

.card {
  background: var(--carbon);
  border: 1px solid var(--steel);
  overflow: hidden;
  transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2);
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-4px); border-color: var(--verde-neon); }

/* Respeito a prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}