/*
 * MAHARA — DESIGN TOKENS
 * Fonte única de valores de design para tudo que for NOVO no site.
 * Os valores abaixo foram extraídos do CSS do Webflow (mahara-mkt.webflow.shared.*.css) — não inventar valores.
 *
 * Camadas (sempre consumir de cima para baixo, nunca pular):
 *   1. Primitivos  --color-*, --space-*, --radius-*, --font-*   (valores brutos; só os tokens semânticos os usam)
 *   2. Semânticos  --surface-*, --text-*, --border-*, --accent-*, --fs-*, --section-*   (o que as seções usam)
 *   3. Componente  --button-*, --card-*, --nav-*, --form-*      (decisões locais de um componente)
 */
:root {
  /* ───────── 1. PRIMITIVOS ───────── */

  /* cor — marca */
  --color-pink-500: #ea0c7e; /* CTA primário, links */
  --color-pink-400: #f50480; /* logo, início do gradiente de destaque */
  --color-pink-900: #660939; /* fim do gradiente rosa */
  --color-pink-glow: #e90b7d; /* orbe .blurry */
  --color-lime-500: #a8f002; /* CTA secundário, destaque "resultado" */
  --color-lime-800: #5f830c; /* fim do gradiente lima */
  --color-black: #000;
  --color-white: #fff;

  /* cor — transparências (o site é escuro: camadas = branco com alfa) */
  --white-a05: rgba(255, 255, 255, 0.05);
  --white-a08: rgba(255, 255, 255, 0.08);
  --white-a10: rgba(255, 255, 255, 0.1);
  --white-a12: rgba(255, 255, 255, 0.12);
  --white-a24: rgba(255, 255, 255, 0.24);
  --white-a60: rgba(255, 255, 255, 0.6);
  --white-a70: rgba(255, 255, 255, 0.7);
  --black-a60: rgba(0, 0, 0, 0.6);
  --black-a80: rgba(0, 0, 0, 0.8);

  /* espaço — base 4px */
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-102: 102px; /* respiro vertical padrão de seção */

  /* raio */
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-24: 24px;
  --radius-32: 32px;
  --radius-pill: 999px;

  /* tipografia */
  --font-display: Nexa, Arial, sans-serif; /* títulos e corpo (Light 300 / Bold 700) */
  --font-body: Inter, sans-serif; /* texto de apoio, formulários (300–700) */

  /* movimento */
  --duration-fast: 0.3s;
  --duration-slow: 0.5s;
  --ease: ease;

  /* camadas z */
  --z-glow: -1;
  --z-content: 1;
  --z-nav: 999;

  /* larguras de container (espelham .container-*) */
  --container-small: 700px;
  --container-medium: 1000px;
  --container-regular: 1062px;
  --container-large: 1216px;

  /* ───────── 2. SEMÂNTICOS ───────── */

  /* superfícies */
  --surface-page: var(--color-black);
  --surface-card: var(--white-a05);
  --surface-card-hover: var(--white-a08);
  --surface-input: var(--black-a80);
  --surface-nav: var(--black-a60);

  /* texto */
  --text-primary: var(--color-white);
  --text-secondary: var(--white-a70); /* parágrafos */
  --text-tertiary: var(--white-a60); /* overline, legendas */
  --text-on-accent-pink: var(--color-white);
  --text-on-accent-lime: var(--color-black);

  /* borda */
  --border-subtle: var(--white-a05);
  --border-default: var(--white-a10);
  --border-strong: var(--white-a12);

  /* acento */
  --accent-primary: var(--color-pink-500);
  --accent-secondary: var(--color-lime-500);
  --accent-primary-gradient: linear-gradient(var(--color-pink-500), var(--color-pink-900));
  --accent-secondary-gradient: linear-gradient(var(--color-lime-500), var(--color-lime-800));
  --text-gradient-heading: linear-gradient(0deg, var(--color-white), #b4b4b4 86%);

  /* tipografia semântica (desktop) */
  --fs-display: 64px; /* h1-heading */
  --fs-h2: 50px; /* h2-heading */
  --fs-h3: 48px; /* h3-heading: título padrão de seção */
  --fs-h4: 24px; /* h4-heading */
  --fs-lead: 18px; /* paragraph-large */
  --fs-body: 16px; /* paragraph-medium */
  --fs-small: 14px; /* paragraph-small */
  --fs-caption: 12px; /* badges */
  --lh-tight: 1.15;
  --lh-heading: 1.2;
  --lh-text: 1.5;
  --ls-display: -0.03em;
  --ls-h2: -0.04em;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* seção */
  --section-pad-y-lg: var(--space-102); /* .section-large */
  --section-pad-y-md: var(--space-64); /* .section-medium */
  --section-pad-y-sm: var(--space-24); /* .section-regular */
  --section-pad-x: 5%;
  --section-gap-header: var(--space-48); /* título → conteúdo */
  --section-gap-footer: var(--space-64); /* conteúdo → CTA final */

  /* ───────── 3. COMPONENTE ───────── */

  --button-height: 48px;
  --button-height-sm: 36px;
  --button-radius: 44px;
  --button-shadow: inset 0 5px 10px rgba(255, 255, 255, 0.2), inset 0 -10px 20px rgba(0, 0, 0, 0.3);
  --button-glow-pink: 0 0 25px rgba(236, 14, 129, 0.6);
  --button-glow-lime: 0 0 25px rgba(168, 240, 2, 0.8);

  --card-bg: var(--surface-card);
  --card-border: 1px solid var(--border-subtle);
  --card-radius: var(--radius-16);
  --card-pad: var(--space-24);
  --card-blur: blur(10px);

  --nav-blur: blur(20px);
  --glow-size: 500px;
  --glow-blur: blur(200px);

  --form-input-bg: var(--surface-input);
  --form-input-border: 1px solid var(--border-default);
  --form-input-radius: 10px;
}

/* Responsivo — o site é desktop-first com os breakpoints do Webflow: 991 / 767 / 479 */
@media screen and (max-width: 991px) {
  :root {
    --fs-display: 56px;
  }
}
@media screen and (max-width: 767px) {
  :root {
    --fs-display: 40px;
    --fs-h2: 48px;
    --fs-h3: 32px;
  }
}
@media screen and (max-width: 479px) {
  :root {
    --fs-display: 42px; /* sim: o original sobe de 40 para 42 — mantido por fidelidade */
    --fs-h2: 32px;
    --fs-h4: 20px;
    --section-pad-y-lg: var(--space-64);
  }
}