/*
  Tokens — Allges
  Única fonte de valores de cor, espaçamento, raio, sombra e tipografia.
  Espelha specs/design.md. Nunca usar um valor cru fora deste arquivo.
*/

:root {
  /* ---- Primitivas (cópia do Figma) ---- */
  --purple-900: #2a0081;
  --purple-700: #4a1db0;
  --purple-500: #a261fe;
  --purple-200: #b9b0d4;
  --blue-500: #274dea;
  --lime-500: #b6db00;
  --lime-600: #9cbb00;
  --gray-950: #191919;
  --gray-600: #5c5c5c;
  --gray-100: #eaeaea;
  --white: #ffffff;
  --white-a08: rgba(255, 255, 255, 0.08);
  --white-a18: rgba(255, 255, 255, 0.18);
  --white-a30: rgba(255, 255, 255, 0.30);
  --white-a45: rgba(255, 255, 255, 0.45);
  --white-a90: rgba(255, 255, 255, 0.90);

  /* ---- Superfície ---- */
  --color-bg-canvas: var(--gray-100);
  --color-bg-canvas-dark: var(--gray-950);
  --color-bg-surface: var(--white);
  --color-bg-brand: var(--purple-500);
  --color-bg-brand-hover: var(--purple-700);
  --color-bg-inverse: var(--purple-900);
  --color-bg-accent: var(--lime-500);
  --color-bg-accent-hover: var(--lime-600);
  --color-bg-info: var(--blue-500);
  --color-bg-disabled: var(--gray-100);
  --color-bg-disabled-inverse: var(--purple-900);
  --color-bg-glass: var(--white-a18);
  --color-bg-glass-hover: var(--white-a30);
  --color-bg-glass-disabled: var(--white-a08);

  /* ---- Texto ---- */
  --color-text-primary: var(--gray-950);
  --color-text-brand-strong: var(--purple-900);
  /* Rebalanceamento de 2026-10-16 (design.md §2.2): texto, borda e ícone de
     destaque passam do roxo vivo para o azul. Pendente de sincronizar no Figma. */
  --color-text-brand: var(--blue-500);
  --color-text-on-brand: var(--gray-950);
  --color-text-on-inverse: var(--white);
  --color-text-on-accent: var(--purple-900);
  --color-text-accent: var(--lime-500);
  --color-text-disabled: var(--gray-600);
  --color-text-disabled-inverse: var(--purple-200);
  --color-text-muted: #52525b;
  --color-text-muted-inverse: rgba(255, 255, 255, 0.72);

  /* ---- Borda / ícone ---- */
  --color-border-brand: var(--blue-500);
  --color-border-subtle: var(--gray-100);
  --color-border-subtle-inverse: rgba(255, 255, 255, 0.14);
  --color-border-inverse: var(--white);
  --color-border-focus: var(--purple-900);
  --color-border-focus-inverse: var(--lime-500);
  --color-border-glass: var(--white-a45);
  --color-border-focus-glass: var(--white-a90);
  --color-icon-brand: var(--blue-500);
  --color-icon-on-inverse: var(--white);

  /* ---- Tipografia ---- */
  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Teto reduzido em 2026-09-07: em 5.5rem, "Um sistema para organizar"
     (25 caracteres) passava de 1180px em Playfair Display Bold e a primeira
     linha do hero quebrava sozinha, virando 3 linhas em vez de 2. */
  --fs-display-1: clamp(2.5rem, 5.6vw, 4.5rem);
  --fs-display-2: clamp(2rem, 4.5vw, 3.5rem);
  --fs-h1: clamp(1.9rem, 3.2vw, 2.75rem);
  /* Elevado de 36px para 60px em 2026-09-08, redesenho da Home no Figma. */
  --fs-h2: clamp(1.875rem, 3.9vw, 3.75rem);
  --fs-h3: 1.5rem;
  /* De 18 para 20px em 2026-09-08, redesenho da Home no Figma. */
  --fs-body-lg: 1.25rem;
  --fs-body: 1rem;
  --fs-body-sm: 0.875rem;
  --fs-label: 0.875rem;
  --fs-caption: 0.75rem;

  --lh-display: 1.1;
  --lh-heading: 1.25;
  --lh-body: 1.6;

  --ls-display: -0.02em;
  --ls-body: 0;
  --ls-label: 0.01em;

  /* ---- Espaçamento ---- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-5xl: 128px;

  /* ---- Raio ---- */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  /* xl e 2xl: extensões aprovadas em 2026-09-08 (specs/design.md §5). xl nos
     cartões de número da seção de problema; 2xl nos painéis da bifurcação. */
  --radius-xl: 30px;
  --radius-2xl: 64px;
  --radius-full: 999px;

  /* ---- Elevação ---- */
  --shadow-soft: 0 8px 20px -4px rgba(42, 0, 129, 0.25);
  --shadow-soft-lg: 0 16px 40px -8px rgba(42, 0, 129, 0.28);

  /* ---- Controles ---- */
  --control-padding-y-md: 12px;
  --control-padding-y-lg: 16px;
  --control-focus-ring: 2px;
  --control-glass-blur: 24px;
  --control-height-md: 44px;
  --control-height-lg: 52px;
  /* Extensão aprovada em 2026-09-09: um degrau acima do Large, só para o CTA
     de vidro abaixo da órbita de integrações (design.md §6.1). */
  --control-height-xl: 62px;

  /* ---- Container ----
     Largura fluida: 90vw em notebook, 75vw em desktop grande (specs/design.md §5).
     Os overrides por breakpoint ficam em base.css.                              */
  --container-w: 90vw;
  --container-max: 1600px;
  --container-pad: clamp(20px, 3vw, 40px);

  /* ---- Superfície de card (profundidade em 3 camadas) ---- */
  --card-surface-light: var(--white);
  --card-surface-on-light: var(--color-bg-canvas);
  --card-surface-dark: #35139a;
  --card-inset-light: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --card-inset-dark: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --card-spotlight-light: rgba(162, 97, 254, 0.18);
  --card-spotlight-dark: rgba(182, 219, 0, 0.14);

  /* ---- Gradiente da marca ---- */
  --brand-gradient-h: linear-gradient(90deg, var(--purple-900), var(--purple-500));
  --brand-gradient-d: linear-gradient(135deg, var(--purple-900), var(--purple-500));

  /* ---- Gradiente de destaque (2026-10-16, design.md §2.2) ----
     Roxo profundo -> azul. Hero, bloco de IA, CTA final, card Pro e núcleo da
     órbita. O gradiente da marca acima continua valendo para o logotipo. */
  --highlight-gradient-h: linear-gradient(90deg, var(--purple-900), var(--blue-500));
  --highlight-gradient-d: linear-gradient(135deg, var(--purple-900), var(--blue-500));

  /* ---- Tons derivados das primitivas (2026-10-16, página Saúde) ----
     Só transparências de cores que já existem; nenhuma cor nova. */
  --color-bg-info-soft: rgba(39, 77, 234, 0.07);   /* blue-500 a 7% */
  --glow-blue: rgba(39, 77, 234, 0.42);            /* blue-500 a 42% */
  --glow-purple: rgba(74, 29, 176, 0.5);           /* purple-700 a 50% */
  --glass-tint-inverse: rgba(42, 0, 129, 0.62);    /* purple-900 a 62%: base do vidro escuro */
  --glass-hairline-light: rgba(42, 0, 129, 0.11);  /* purple-900 a 11%: quina do vidro claro (design.md §6.1) */
  --dot-blue: rgba(39, 77, 234, 0.26);             /* blue-500 a 26%: malha de pontos do hero Saúde */

  /* ---- Regime escuro da página Serviços (2026-10-19) ---- */
  --color-text-brand-on-dark: var(--purple-500);   /* destaque de título grande sobre #191919: 4.7:1 (o azul dá 2.5:1) */
  --color-data-1: var(--blue-500);                 /* série 1 dos gráficos (ex.: Meta Ads) */
  --color-data-2: var(--purple-500);               /* série 2 dos gráficos (ex.: Google Ads) */
  --dot-light: rgba(255, 255, 255, 0.10);          /* malha de pontos sobre fundo escuro */
  /* Vidro escuro "de verdade" (2026-10-19): sem borda chapada; a quina é um
     brilho especular em degradê e a sombra é roxa e profunda (design.md §5). */
  --white-a04: rgba(255, 255, 255, 0.04);
  --white-a12: rgba(255, 255, 255, 0.12);
  --shadow-glass: 0 40px 80px -30px rgba(42, 0, 129, 0.6), 0 12px 30px -12px rgba(42, 0, 129, 0.45);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-slow: 250ms;
}