/* ============================================================
   MULHERES SEM MEDO — DESIGN SYSTEM
   tokens.css · Design tokens (fonte única da verdade)
   ------------------------------------------------------------
   Paleta e identidade extraídas dos materiais da campanha:
   roxo profundo · magenta/rosa vibrante · lilás suave · laço roxo.
   Todos os estilos do site consomem estas variáveis.
   ============================================================ */

:root {
  /* -------------------------------------------------------
     1. CORES — escalas de marca
     ------------------------------------------------------- */

  /* Roxo (cor primária da marca) */
  --c-purple-950: #1c0a2b;
  --c-purple-900: #290e3d;
  --c-purple-800: #3a1256;
  --c-purple-700: #4e1a6e;
  --c-purple-600: #6a2a8c; /* primária */
  --c-purple-500: #883fae;
  --c-purple-400: #a866c9;
  --c-purple-300: #c79bdd;
  --c-purple-200: #e1c8ef;
  --c-purple-100: #f1e4f8;
  --c-purple-50:  #f9f2fc;

  /* Magenta / rosa (acento — energia, o "sem", "à voz", corações) */
  --c-magenta-800: #870a4b;
  --c-magenta-700: #a50d5b;
  --c-magenta-600: #c6127a; /* acento primário */
  --c-magenta-500: #e01b84;
  --c-magenta-400: #f0479f;
  --c-magenta-300: #f87ebc;
  --c-magenta-200: #fcb9d9;

  /* Lilás (suave — tailleur, fundos claros) */
  --c-lilac-500: #9a7fd0;
  --c-lilac-400: #b49ce0;
  --c-lilac-300: #cbb8ec;
  --c-lilac-200: #e4d8f5;
  --c-lilac-100: #f2ecfa;

  /* Neutros (base ameixa, não cinza puro — harmoniza com o roxo) */
  --c-ink:       #221a29; /* texto principal */
  --c-ink-soft:  #473c53;
  --c-muted:     #6c6178; /* texto secundário */
  --c-line:      #e9e0f0; /* bordas / divisórias */
  --c-line-soft: #f1ebf6;
  --c-bg:        #fbf8fd; /* fundo da página */
  --c-surface:   #ffffff; /* cartões / superfícies */
  --c-white:     #ffffff;
  --c-black:     #14101a;

  /* Estados / feedback */
  --c-success:   #1f8a5b;
  --c-danger:    #cf2a4b;
  --c-warning:   #c9740a;
  --c-info:      var(--c-purple-600);

  /* -------------------------------------------------------
     2. TOKENS SEMÂNTICOS (usados pelos componentes)
     ------------------------------------------------------- */
  --color-bg:            var(--c-bg);
  --color-surface:       var(--c-surface);
  --color-surface-alt:   var(--c-purple-50);
  --color-text:          var(--c-ink);
  --color-text-muted:    var(--c-muted);
  --color-heading:       var(--c-purple-900);
  --color-primary:       var(--c-purple-600);
  --color-primary-strong:var(--c-purple-800);
  --color-accent:        var(--c-magenta-600);
  --color-accent-strong: var(--c-magenta-700);
  --color-border:        var(--c-line);
  --color-ring:          var(--c-magenta-500); /* foco */

  /* Superfícies escuras (seções em roxo profundo) */
  --color-dark-bg:       var(--c-purple-950);
  --color-dark-surface:  var(--c-purple-900);
  --color-on-dark:       #f6eefb;
  --color-on-dark-muted: #c9b6dd;

  /* -------------------------------------------------------
     3. GRADIENTES da marca
     ------------------------------------------------------- */
  --gradient-brand:      linear-gradient(120deg, var(--c-purple-700) 0%, var(--c-magenta-600) 100%);
  --gradient-brand-vivid:linear-gradient(120deg, var(--c-purple-600) 0%, var(--c-magenta-500) 100%);
  --gradient-brand-soft: linear-gradient(135deg, var(--c-purple-100) 0%, var(--c-lilac-200) 55%, var(--c-magenta-200) 120%);
  --gradient-dark:       linear-gradient(150deg, var(--c-purple-950) 0%, var(--c-purple-800) 60%, #5a1a5e 130%);
  --gradient-hero:       radial-gradient(120% 120% at 85% 15%, #7a2f9e 0%, var(--c-purple-900) 45%, var(--c-purple-950) 100%);
  --gradient-text:       linear-gradient(100deg, var(--c-purple-600), var(--c-magenta-600));

  /* -------------------------------------------------------
     4. TIPOGRAFIA
     ------------------------------------------------------- */
  --font-display: "Montserrat", "Segoe UI", system-ui, sans-serif; /* títulos fortes, caixa alta */
  --font-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-script:  "Dancing Script", "Segoe Script", cursive; /* acento manuscrito ("sem", "à voz") */

  /* Escala tipográfica fluida (clamp: min · preferido · max) */
  --fs-display: clamp(2.75rem, 1.6rem + 5.2vw, 5rem);
  --fs-h1:      clamp(2.1rem, 1.35rem + 3.3vw, 3.5rem);
  --fs-h2:      clamp(1.7rem, 1.2rem + 2.2vw, 2.6rem);
  --fs-h3:      clamp(1.3rem, 1.05rem + 1.1vw, 1.7rem);
  --fs-h4:      clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  --fs-lg:      1.1875rem;   /* 19px */
  --fs-body:    1.0625rem;   /* 17px */
  --fs-sm:      0.9375rem;   /* 15px */
  --fs-xs:      0.8125rem;   /* 13px */
  --fs-eyebrow: 0.78rem;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-extra:   800;
  --fw-black:   900;

  --lh-tight:   1.08;
  --lh-snug:    1.25;
  --lh-normal:  1.6;
  --lh-relaxed: 1.75;

  --ls-tight:  -0.02em;
  --ls-normal: 0;
  --ls-wide:   0.04em;
  --ls-caps:   0.14em; /* eyebrows em caixa alta */

  /* -------------------------------------------------------
     5. ESPAÇAMENTO (base 4px) e LAYOUT
     ------------------------------------------------------- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  2.5rem;
  --sp-8:  3rem;
  --sp-9:  4rem;
  --sp-10: 5rem;
  --sp-11: 6rem;
  --sp-12: 8rem;

  --section-py: clamp(3.5rem, 2rem + 6vw, 7rem); /* respiro vertical das seções */

  --container:      1200px;
  --container-wide: 1360px;
  --container-narrow: 760px;
  --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 2.5rem);

  /* -------------------------------------------------------
     6. RAIOS, BORDAS, SOMBRAS
     ------------------------------------------------------- */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-xl:   32px;
  --r-2xl:  44px;
  --r-pill: 999px;

  --border: 1px solid var(--color-border);

  /* Sombras com tom roxo (não cinza) — dão profundidade coerente */
  --shadow-xs: 0 1px 2px rgba(58, 18, 86, 0.06);
  --shadow-sm: 0 2px 8px rgba(58, 18, 86, 0.07);
  --shadow-md: 0 10px 30px -12px rgba(74, 26, 110, 0.22);
  --shadow-lg: 0 24px 60px -22px rgba(58, 18, 86, 0.32);
  --shadow-glow: 0 18px 50px -18px rgba(198, 18, 122, 0.45);
  --shadow-focus: 0 0 0 4px rgba(224, 27, 132, 0.28);

  /* -------------------------------------------------------
     7. MOVIMENTO
     ------------------------------------------------------- */
  --dur-fast:  140ms;
  --dur-base:  240ms;
  --dur-slow:  480ms;
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* -------------------------------------------------------
     8. CAMADAS (z-index)
     ------------------------------------------------------- */
  --z-base:    1;
  --z-sticky:  100;
  --z-header:  200;
  --z-overlay: 900;
  --z-modal:   1000;
  --z-toast:   1100;
}