/* Design tokens — Single Software
   Fonte: Figma file WxKcSqgG8CF2YHlHXBqPCd, node 4307:14906
   Extraidos via mcp__figma__get_variable_defs em 2026-05-17
*/

:root {
  /* ── Paleta primaria (roxo — identidade do site) ─────────────── */
  --color-bg:                #0C0411; /* Secondary/950 — bg principal */
  --color-bg-elevated:       #210C32; /* Secondary/900 */
  --color-surface:           #431964; /* Secondary/800 */
  --color-surface-hover:     #642595; /* Secondary/700 */
  --color-brand:             #8632c7; /* Secondary/600 */
  --color-brand-strong:      #a73ef9; /* Secondary/500 */
  --color-brand-soft:        #F9F1FF; /* Secondary/50 */

  /* ── Accents (badges, highlights) ─────────────────────────────── */
  --color-accent-magenta:    #f741f7; /* Primary/600 — destaque CTAs */
  --color-accent-green:      #97ff7d; /* Primary/500 — badges "Top 1" */
  --color-accent-blue:       #3c6dfa; /* Primary/400 */

  /* ── Neutros (texto, bordas) ──────────────────────────────────── */
  --color-text:              #ffffff; /* content/0 */
  --color-text-muted:        #999999; /* Gray/400 */
  --color-text-mid:          #808080; /* Gray/500 */
  --color-text-dim:          #666666; /* Gray/600 */
  --color-divider:           #ffffff1a; /* opacidade/100 — divisores sobre dark */
  --color-light-50:          #F7F7F7;
  --color-dark-900:          #1a1a1a;
  --color-dark-950:          #080808;

  /* ── Tipografia ──────────────────────────────────────────────── */
  --font-sans:    "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-display: "Poppins", "Lato", sans-serif; /* H3 + destaques */

  /* Desktop */
  --fs-h1:        48px;  --lh-h1:        56px;
  --fs-h2:        30px;  --lh-h2:        38px;
  --fs-h3:        24px;  --lh-h3:        32px;
  --fs-h4:        18px;  --lh-h4:        24px;
  --fs-h5:        16px;  --lh-h5:        22px;
  --fs-h6:        12px;  --lh-h6:        16px;
  --fs-p:         14px;  --lh-p:         20px;

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-bold:      800;

  /* ── Espacamento ──────────────────────────────────────────────── */
  --space-1:      4px;
  --space-2:      8px;
  --space-3:      12px;
  --space-4:      16px;
  --space-5:      20px;
  --space-6:      24px;
  --space-8:      32px;
  --space-10:     40px;
  --space-12:     48px;
  --space-16:     64px;
  --space-20:     80px;
  --space-24:     96px;
  --space-32:     128px;

  /* ── Layout ──────────────────────────────────────────────────── */
  --container-max:    1280px;
  --container-pad-x:  20px;
  --radius-sm:        4px;
  --radius-md:        8px;
  --radius-lg:        16px;
  --radius-pill:      999px;

  /* ── Breakpoints (so referencia) ─────────────────────────────── */
  /* sm: 640px  md: 768px  lg: 1024px  xl: 1280px */
}

/* Tablet — H1/H2/H3 reduzem */
@media (max-width: 1023px) {
  :root {
    --fs-h1: 36px;  --lh-h1: 44px;
    --fs-h2: 30px;  --lh-h2: 38px;
    --fs-h3: 24px;  --lh-h3: 32px;
  }
}

/* Mobile */
@media (max-width: 639px) {
  :root {
    --fs-h1: 26px;  --lh-h1: 34px;
    --fs-h2: 20px;  --lh-h2: 28px;
    --fs-h3: 18px;  --lh-h3: 24px;
    --container-pad-x: 16px;
  }
}