/* =============================================================
   BateClick — Design Tokens
   Paleta moss + cobre. Backgrounds nunca em preto puro.
   Fonte da verdade da identidade visual (do briefing).
   ============================================================= */

:root {
  /* === BACKGROUNDS === */
  --bg-primary: #0e1410;     /* verde-musgo quase preto */
  --bg-secondary: #161e1a;   /* cards e seções alternadas */
  --bg-elevated: #1f2a25;    /* hover states, dropdowns */

  /* === MOSS (verde-musgo — cor de marca) === */
  --moss: #3a5a47;
  --moss-deep: #243d30;
  --moss-light: #5a7a5e;
  --moss-metallic: #4d6b53;

  /* === COPPER (cobre — acento/solução) === */
  --copper: #c2602a;
  --copper-bright: #e07a3a;
  --copper-deep: #8b4313;
  --copper-metallic: #d4753a;

  /* === FOREGROUNDS === */
  --fg-primary: #f4ede0;     /* off-white quente */
  --fg-secondary: #a89e8c;   /* texto corrido */
  --fg-muted: #5d574c;       /* labels apagados */

  /* === LINES & STATES === */
  --line: #1f2a25;
  --line-strong: #2d3d34;
  --success: #6ba368;
  --error: #c95151;

  /* === FONT FAMILIES === */
  --font-display: "Big Shoulders Display", "Eurostile Extended", "Bank Gothic",
    "Geist", system-ui, sans-serif;
  --font-sans: "Geist", "Inter", system-ui, sans-serif;
  --font-mono: "Geist Mono", "JetBrains Mono", monospace;

  /* === RADII === */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* === GLOWS === */
  --glow-copper: 0 0 40px rgba(224, 122, 58, 0.35);
  --glow-copper-strong: 0 0 60px rgba(224, 122, 58, 0.55);

  /* === EASING === */
  --ease-cinema: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-expo: cubic-bezier(0.7, 0, 0.84, 0);

  /* === LAYOUT === */
  --header-h: 84px;
  --container: 1440px;
}

/* === GRADIENT UTILITIES === */
.gradient-metallic-copper {
  background: linear-gradient(180deg, var(--copper-bright) 0%, var(--copper) 50%, var(--copper-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.gradient-metallic-moss {
  background: linear-gradient(180deg, var(--moss-light) 0%, var(--moss) 50%, var(--moss-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}