/* ==========================================================================
   DESIGN TOKENS
   Edite somente este arquivo para ajustar cores, tipografia e espaçamentos
   em todo o site.
   ========================================================================== */

:root {
  /* ---- Cor — base ---- */
  --color-bg: #000000;
  --color-bg-elevated: #131318;
  --color-bg-elevated-2: #1a1a21;
  --color-border: rgba(245, 245, 250, 0.08);
  --color-border-strong: rgba(245, 245, 250, 0.16);

  /* ---- Cor — texto ---- */
  --color-text-primary: #f4f4f7;
  --color-text-secondary: #9b9ba6;
  --color-text-tertiary: #6a6a75;

  /* ---- Cor — marca oficial (azul → roxo/violeta) ----
     Valores extraídos diretamente do degradê da logo oficial
     (assets/images/icons/EBENÉZER.png). --color-accent* são mantidos como
     alias para não exigir troca em cada selector que já os usa. */
  --brand-blue: #4671ef;
  --brand-purple: #7b52e6;
  --brand-gradient: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-purple) 100%);
  --brand-soft: rgba(123, 82, 230, 0.12);
  --brand-border: rgba(123, 82, 230, 0.35);
  --brand-glow: 0 0 80px rgba(123, 82, 230, 0.18);

  --color-accent: var(--brand-purple);
  --color-accent-2: var(--brand-blue);
  --color-accent-soft: var(--brand-soft);
  --color-accent-border: var(--brand-border);
  --gradient-accent: var(--brand-gradient);
  --gradient-accent-soft: linear-gradient(135deg, rgba(123, 82, 230, 0.16) 0%, rgba(70, 113, 239, 0.05) 100%);
  --glow-accent: var(--brand-glow);

  /* ---- Tipografia ---- */
  --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, monospace;
  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;

  --fs-display-xl: clamp(2.4rem, 6vw + 1rem, 5.5rem);
  --fs-display-lg: clamp(2.1rem, 3.6vw + 1rem, 3.6rem);
  --fs-display-md: clamp(1.6rem, 2.2vw + 1rem, 2.4rem);
  --fs-display-sm: clamp(1.3rem, 1.2vw + 1rem, 1.7rem);
  --fs-body-lg: clamp(1.05rem, 0.4vw + 1rem, 1.25rem);
  --fs-body-md: 1rem;
  --fs-body-sm: 0.9rem;
  --fs-label: 0.8rem;
  --fs-eyebrow: 0.78rem;

  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-normal: 1.55;

  /* ---- Espaçamento ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  --section-pad-y: clamp(4.5rem, 8vw, 8rem);
  --container-w: 1240px;
  --container-pad: clamp(1.25rem, 4vw, 2.5rem);

  /* ---- Forma ---- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* ---- Movimento ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.2s;
  --dur-med: 0.5s;
  --dur-slow: 0.9s;

  /* ---- Camadas ---- */
  --z-header: 100;
  --z-menu: 200;
  --z-overlay: 300;
  --z-cursor: 500;
}