/* ==========================================================================
   Design tokens — espelham as variáveis do Figma (arquivo "Identidade Visual")
   Nomes: "Color palette/<Grupo>/<Nome>" → --color-<grupo>-<nome>
   ========================================================================== */
:root {
  /* Color palette / Branding */
  --color-branding-default-purple: #6b5d8d;
  --color-branding-secondary: #d1cc38; /* Figma: branding-secundary — no DS: "Accent Lime" */

  /* Color palette / Background */
  --color-background-default-lavender: #f4effc;
  --color-background-secondary-white: #ffffff;
  --color-background-terciary-gray: #ececec;

  /* Color palette / Neutrals */
  --color-neutrals-white: #ffffff;
  --color-neutrals-primary-black: #111111;
  --color-neutrals-gray-1: #999999; /* Figma: Neutrals/Gray 1 */
  --color-neutrals-gray-2: #ececec; /* Figma: Neutrals/Gray 2 (mesmo valor de Background/Terciary - Gray) */

  /* Typography */
  --font-family-base: "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-family-display: "Comfortaa", var(--font-family-base);
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-size-10: 10px;
  --font-size-12: 12px;
  --font-size-14: 14px;
  --font-size-16: 16px;
  --font-size-20: 20px;
  --font-size-24: 24px; /* Figma: Spacing/Space M aplicado ao texto */
  --font-size-32: 32px; /* Figma: Spacing/Space X aplicado ao texto */
  --font-size-40: 40px; /* Figma: Spacing/Space XL aplicado ao texto */
  --font-size-56: 56px;
  --line-height-normal: normal;
  --line-height-22: 22px;
  --line-height-26: 26px;
  --line-height-28: 28px;
  --line-height-34: 34px;
  --line-height-36: 36px;
  --line-height-42: 42px;
  --line-height-45: 45px; /* Figma: "normal" da Comfortaa 40px (título do CTA) */
  --line-height-58: 58px;

  /* Spacing */
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-11: 11px;
  --space-16: 16px;
  --space-22: 22px;
  --space-12: 12px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px; /* Figma: Spacing/Space XL */
  --space-48: 48px;
  --space-76: 76px;
  --space-86: 86px; /* Espaço entre seções da home */
  --space-112: 112px;
  --space-192: 192px;
  --space-56: 56px;

  /* Radius */
  --radius-pill: 200px;
  --radius-header: 40px; /* Header Fixed e Hero: cantos inferiores */
  --radius-card: 24px;

  /* Effects */
  --shadow-none: 0 0 0 rgba(0, 0, 0, 0);
  --shadow-hover: 0 4px 2px rgba(0, 0, 0, 0.1); /* Link, Button e Social link */
  /* Layout */
  --layout-max-width: 1728px;
  --layout-gutter: var(--space-56);
  --header-height: 104px;
  --header-divider: 2px;
  --header-mobile-inset: calc(var(--layout-gutter) + var(--space-8)); /* 32px: logo e lista do menu mobile */

  /* Motion — transição suave entre default e hover */
  --motion-duration: 300ms;
  --motion-easing: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Seções da home: espaço vertical e títulos (desktop = Figma) */
:root {
  --section-spacing: var(--space-86);
  --section-title-size: var(--font-size-40);
  --section-title-lh: var(--line-height-42);
}

/* Tablet (768–1023px) e mobile (< 768px): coluna única */
@media (max-width: 1023.98px) {
  :root {
    --layout-gutter: var(--space-40);
    --section-spacing: var(--space-56);
    --section-title-size: var(--font-size-32);
    --section-title-lh: var(--line-height-34);
  }
}

@media (max-width: 767.98px) {
  :root {
    --layout-gutter: var(--space-24);
  }
}