/* SpeakClub — Design tokens
   Valores extraídos dos exports do Figma em _spec/ */

:root {
  /* ---- Cores da marca ---- */
  --c-blue: #3942FF;        /* primária: CTAs, links, ícones */
  --c-blue-deep: #222899;   /* fim do gradiente do hero */
  --c-ink: #000349;         /* texto principal, fundo do rodapé */
  --c-ink-soft: #2E2C66;    /* texto secundário */
  --c-lavender: #EFEFFF;    /* fundo padrão da página */
  --c-lime: #CFF665;        /* destaque: topbar, seção de depoimentos */
  --c-coral: #FF4733;       /* destaque quente: navbar, badges */
  --c-mint: #9CF0E3;        /* fundo do hero */
  --c-white: #FFFFFF;

  /* ---- Cores derivadas (usadas como rgba no export) ---- */
  --c-blue-08: rgba(57, 66, 255, 0.08);
  --c-blue-24: rgba(57, 66, 255, 0.24);
  --c-ink-12: rgba(0, 3, 73, 0.12);
  --c-ink-40: rgba(0, 3, 73, 0.40);

  /* ---- Gradientes ---- */
  --g-blue: linear-gradient(180deg, var(--c-blue) 0%, var(--c-blue-deep) 100%);
  --g-lime-mint: linear-gradient(180deg, var(--c-lime) 0%, var(--c-mint) 100%);

  /* ---- Tipografia ---- */
  --font: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Escala fluida. O 2º valor de cada clamp é o tamanho do design (1920px). */
  --fs-hero: clamp(2.5rem, 5vw, 6rem);      /*  40 → 96px */
  --fs-h2: clamp(1.75rem, 2.6vw, 2.5rem);   /*  28 → 40px */
  --fs-h3: clamp(1.5rem, 2vw, 2rem);        /*  24 → 32px */
  --fs-lead: clamp(1.125rem, 1.4vw, 1.5rem);/*  18 → 24px */
  --fs-body: 1rem;                          /*      16px */
  --fs-ui: clamp(1rem, 1.1vw, 1.25rem);     /*  16 → 20px */
  --fs-sm: 0.875rem;                        /*      14px */
  --fs-xs: 0.75rem;                         /*      12px */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --lh-tight: 1.1;
  --lh-heading: 1.2;
  --lh-body: 1.6;

  /* ---- Layout ---- */
  --container: 1400px;      /* largura do conteúdo (cards, grids) */
  --container-wide: 1760px; /* blocos que sangram mais (heros internos) */
  --gutter: clamp(1rem, 4vw, 5rem);

  /* ---- Altura do header (topbar 56 + navbar 64) ---- */
  --h-topbar: 56px;
  --h-navbar: 64px;
  --h-header: calc(var(--h-topbar) + var(--h-navbar));

  /* ---- Espaçamento ---- */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 2.5rem;
  --sp-6: 3rem;
  --sp-8: 4rem;
  --sp-section: clamp(3rem, 6vw, 7.5rem);

  /* ---- Formas ---- */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 100px;

  --border: 1px solid var(--c-ink);

  /* ---- Movimento ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 200ms;
}

/* Quem pediu menos movimento, recebe menos movimento. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur: 1ms; }
}