/* ==========================================================================
   tokens.css — fonte única dos valores de design

   - Somente custom properties em :root. Nenhuma regra de seletor aqui.
   - A paleta da marca e a fonte principal foram definidas pelo cliente. Os
     demais valores (escala tipográfica, espaçamentos, raios, sombras,
     transições) ainda são provisórios e serão refinados seção a seção
     (ver docs/design-system.md); ao aprovar algo, registre lá a decisão.
   - Os demais arquivos CSS consomem estes tokens; evite valores soltos
     (cores, espaçamentos, raios, sombras) fora deste arquivo.
   ========================================================================== */

:root {

  /* --------------------------------------------------------------------
     Cores — paleta da marca (definida pelo cliente)
     Uso: magenta é cor de DESTAQUE (botões, palavras-chave, detalhes),
     nunca preenchimento de grandes áreas.
     Contraste do magenta: 4,7:1 com texto branco (ok para botão);
     4,4:1 sobre o dark principal (ok para texto grande e gráficos; para
     texto pequeno sobre dark use --brand-rose-200).
     -------------------------------------------------------------------- */
  --brand-magenta: #e30068;
  --brand-magenta-rgb: 227 0 104;     /* para alfas: rgb(var(--brand-magenta-rgb) / .2) */
  --brand-magenta-dark: #c4005a;      /* hover/pressed */
  --brand-ink: #070206;               /* dark principal: só FUNDO de seções escuras (nunca cor de texto) */
  --brand-ink-2: #1a171b;             /* COR DA TIPOGRAFIA sobre claro; também o dark secundário (cartões escuros) */
  --brand-ink-2-rgb: 26 23 27;
  --brand-white: #ffffff;
  --brand-rose-50: #fff9fc;           /* fundo claro principal */
  --brand-rose-100: #fff0f7;
  --brand-rose-200: #ffd4e8;
  --brand-ink-muted: rgb(var(--brand-ink-2-rgb) / 0.8);   /* texto de apoio sobre claro: o MESMO #1A171B a 80 % (≈ 9:1 em branco) */

  /* --------------------------------------------------------------------
     Superfícies (o sistema inteiro usa só estas)
     LIGHT primary  --brand-white   #FFFFFF
     LIGHT soft     --brand-rose-50  #FFF9FC
     LIGHT accent   --brand-rose-100 #FFF0F7
     DARK primary   --brand-ink      #070206
     DARK secondary --brand-ink-2    #1A171B
     ACCENT         --brand-magenta  #E30068
     (--brand-rose-200 é só um tom de DETALHE: anel, camada, texto sobre escuro; não é superfície.)
     -------------------------------------------------------------------- */
  --hairline-light: rgb(var(--brand-ink-2-rgb) / 0.1);     /* fios e bordas sobre claro */
  --hairline-dark: rgb(255 255 255 / 0.12);              /* fios e bordas sobre escuro */

  /* --------------------------------------------------------------------
     Contexto de seção: LIGHT por padrão. .section--light / .section--dark
     (e .theme-light / .theme-dark, .card--light / .card--dark) redefinem os
     seis valores abaixo; os papéis --color-* os seguem (components.css).
     -------------------------------------------------------------------- */
  --section-bg: var(--brand-rose-50);
  --section-text: var(--brand-ink-2);
  --section-muted: var(--brand-ink-muted);
  --section-border: var(--hairline-light);
  --section-surface: var(--brand-white);
  --section-accent: var(--brand-magenta);

  /* --------------------------------------------------------------------
     Cores — semânticas (nomes por função; use estas nos componentes)
     Seguem o contexto de seção acima. NÃO redefina --color-* seção a seção:
     use .section--dark / .section--light (components.css).
     -------------------------------------------------------------------- */
  --color-bg: var(--section-bg);
  --color-bg-alt: var(--brand-rose-100);
  --color-surface: var(--section-surface);
  --color-bg-inverse: var(--brand-ink);
  --color-bg-inverse-alt: var(--brand-ink-2);

  --color-text: var(--section-text);
  --color-text-muted: var(--section-muted);
  --color-text-inverse: var(--brand-white);

  --color-border: var(--section-border);
  --color-border-strong: var(--brand-ink);

  --color-accent: var(--section-accent);
  --color-accent-hover: var(--brand-magenta-dark);
  --color-accent-contrast: var(--brand-white);

  --color-focus: var(--brand-magenta);

  /* Contexto escuro (usados pelos temas dark) */
  --color-on-dark: var(--brand-white);
  --color-on-dark-muted: rgb(255 255 255 / 0.8);   /* texto de apoio sobre escuro: branco a 80 % */
  --color-on-dark-border: var(--hairline-dark);
  --color-on-dark-focus: var(--brand-rose-200);

  /* --------------------------------------------------------------------
     Tipografia
     Inter Tight vem do Google Fonts (<link> no <head>); o fallback evita
     salto de layout enquanto ela carrega ou se o serviço falhar.
     -------------------------------------------------------------------- */
  --font-family-base: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-heading: var(--font-family-base);

  /* Inter Tight, 400–800: 400 corpo · 500 apoio e labels · 600 subtítulos e UI · 700 títulos · 800 só destaque grande */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  --line-height-tight: 1.1;
  --line-height-snug: 1.3;
  --line-height-body-lg: 1.5;
  --line-height-base: 1.6;

  --letter-spacing-tight: -0.02em;     /* títulos */
  --letter-spacing-normal: 0;
  --letter-spacing-label: 0.06em;      /* eyebrows e rótulos em caixa alta */
  --letter-spacing-wide: var(--letter-spacing-label);

  /* Escala base (tamanhos fixos, para componentes pequenos: header, ícones) */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;

  /* ESCALA GLOBAL (papéis; fluida, sem saltos entre breakpoints). Uma seção pode variar um papel com calc(), mas a
     diferença tem de ser intencional. Não use outros tamanhos de texto em componentes. */
  --text-display: clamp(2.125rem, 1.7rem + 1.81vw, 3.6rem);      /* H1 da Hero: 34 → 58 px (53 a 1440) */
  --text-title: clamp(1.75rem, 1.56rem + 0.76vw, 2.5rem);        /* H2 de seção: 28 → 40 px (36 a 1440) */
  --text-h3: clamp(1.25rem, 1.1rem + 0.5vw, 1.625rem);           /* H3 / título de componente: 20 → 26 px */
  --text-statement: clamp(1.25rem, 1.05rem + 0.6vw, 1.75rem);    /* frase de conclusão: 20 → 28 px */
  --text-body-lg: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);      /* texto de apoio: 17 → 18 px */
  --text-body: clamp(0.9375rem, 0.9rem + 0.1vw, 1rem);           /* corpo: 15 → 16 px */
  --text-small: clamp(0.8125rem, 0.78rem + 0.1vw, 0.875rem);     /* pequeno: 13 → 14 px */
  --text-micro: clamp(0.6875rem, 0.66rem + 0.1vw, 0.75rem);      /* eyebrow: 11 → 12 px */
  --text-numeral: clamp(4.5rem, 6.8vw, 7.5rem);                    /* numeral gráfico dos cards: 72 → 120 px */

  /* Degradê escuro padrão (seções dark, header, footer): mais escuro à esquerda */
  --gradient-dark: linear-gradient(90deg, var(--brand-ink) 0%, var(--brand-ink-2) 100%);

  /* CTA: UMA anatomia (altura 52 px no celular, 56 px no desktop; corpo 15 → 16 px, peso 600). O CTA compacto
     (.button--sm, usado no header) tem 44 px. */
  --cta-height: 3.25rem;
  --cta-height-sm: 2.75rem;
  --cta-font: var(--text-body);

  /* --------------------------------------------------------------------
     Layout e container
     -------------------------------------------------------------------- */
  --container-max: 75rem;           /* 1200px: container principal */
  --container-wide: 82.5rem;        /* 1320px: painéis largos */
  --container-narrow: 48rem;
  --container-gutter: clamp(1.25rem, 4vw, 2.5rem);

  --measure-base: 65ch;             /* largura máxima confortável de leitura */
  --tap-target-min: 2.75rem;        /* área mínima de toque (44px) */
  --header-height: clamp(3.75rem, 5.2vw, 6rem);   /* header fixo: 60px até ≈ 1155px de largura, depois 5.2vw (96px em 1920) */
  --scroll-offset: var(--header-height);   /* compensa o header fixo nas âncoras */

  /* --------------------------------------------------------------------
     Espaçamento (base 4px)
     -------------------------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* Ritmo vertical entre seções (valores nos @media no fim deste arquivo):
     celular 64 / 48 / 40 · tablet 80 / 64 / 48 · desktop 112 / 88 / 64 px.
     lg = respiro amplo (clímax e fechamento) · md = seção comum · sm = seção encadeada à anterior */
  --section-space-lg: 4rem;
  --section-space-md: 3rem;
  --section-space-sm: 2.5rem;

  /* --------------------------------------------------------------------
     Border radius
     -------------------------------------------------------------------- */
  --radius-none: 0;
  --radius-xs: 0.25rem;    /*  4 px — só pontas de barras e abas de acento */
  --radius-sm: 0.625rem;   /* 10 px — controles menores (tags, chips, miniaturas) */
  --radius-md: 1rem;       /* 16 px — botões e cards pequenos (linhas de FAQ, fotos internas) */
  --radius-lg: 1.5rem;     /* 24 px — cards principais */
  --radius-xl: 2rem;       /* 32 px — grandes painéis e folhas de seção */
  --radius-pill: 999px;

  /* --------------------------------------------------------------------
     Bordas
     -------------------------------------------------------------------- */
  --border-width: 1px;
  --border-width-strong: 2px;
  --border-base: var(--border-width) solid var(--color-border);

  /* --------------------------------------------------------------------
     Sombras: só dois níveis. Cards claros: --shadow-sm (ou md quando se sobrepõem); cards escuros: borda, sem sombra.
     Sem glow em componentes comuns.
     -------------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgb(var(--brand-ink-2-rgb) / 0.06);
  --shadow-md: 0 8px 24px -12px rgb(var(--brand-ink-2-rgb) / 0.16);

  /* --------------------------------------------------------------------
     Transições
     -------------------------------------------------------------------- */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --transition-base: var(--duration-base) var(--ease-standard);

  /* Motion (fase UX): um sistema pequeno. Hover/feedback ≤ 250 ms · accordion ≤ 320 ms · reveal 450–650 ms.
     Só opacity e transform/translate/scale/rotate (nada que cause reflow). */
  --motion-fast: 180ms;
  --motion-normal: 320ms;
  --motion-slow: 520ms;
  --motion-enter: 620ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --reveal-distance: 1.25rem;   /* 20 px */

  /* --------------------------------------------------------------------
     Z-index
     -------------------------------------------------------------------- */
  --z-base: 0;
  --z-raised: 10;
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;

  /* --------------------------------------------------------------------
     Breakpoints (conceituais)
     Custom properties NÃO funcionam dentro de @media. Estes valores servem
     de documentação e de referência para o JS (getComputedStyle). Os
     valores literais são usados em css/responsive.css — mantenha os dois
     em sincronia.
     -------------------------------------------------------------------- */
  --bp-sm: 40em;     /* 640px  — smartphone grande / paisagem */
  --bp-md: 48em;     /* 768px  — tablet */
  --bp-lg: 64em;     /* 1024px — notebook */
  --bp-xl: 80em;     /* 1280px — desktop */
  --bp-nav: 75em;    /* 1200px — a navegação do header só vira linha única a partir daqui (abaixo: menu mobile) */
}

/* Valores por breakpoint (custom properties não funcionam dentro de @media: os literais ficam aqui) */
@media (min-width: 48em) {
  :root {
    --section-space-lg: 5rem;
    --section-space-md: 4rem;
    --section-space-sm: 3rem;
  }
}

@media (min-width: 64em) {
  :root {
    --section-space-lg: 7rem;
    --section-space-md: 5.5rem;
    --section-space-sm: 4rem;
    --cta-height: 3.5rem;
  }
}