/* ELEVO Design System - tokens.css
   Importable CSS custom properties. Closed token layer for implementation.
   Mirrors design_system/showcase.html :root exactly. Never let them drift.
   Layer 1 = primitives (exact brand hex). Layer 2 = semantic aliases (what components use). */

:root,
[data-theme="dark"] {
  /* - LAYER 1: PRIMITIVES (from my_brand_assets/Manual de Identidade Visual - Elevo_Baixa.pdf) - */
  /* Malva oficial da marca (#a780e5). O recorte e os SVGs originais vinham
     com #b882e8, mais rosado; a cliente confirmou em 2026-08-20 que o valor
     correto e este. Trocado aqui e nos dois SVGs da marca. */
  --primitive-malva: #a780e5;
  --primitive-roxo: #2f1533;
  --primitive-cinza: #edeae5;
  --primitive-laranja: #ff4817;
  --primitive-grafite: #0f0f0f;

  --primitive-neutral-50: #f7f5f2;
  --primitive-neutral-100: #edeae5;
  --primitive-neutral-200: #ddd8d0;
  --primitive-neutral-300: #c3bcb0;
  --primitive-neutral-400: #a89f91;
  --primitive-neutral-500: #8b8175;
  --primitive-neutral-600: #6f665c;
  --primitive-neutral-700: #4a4340;
  --primitive-neutral-800: #2b2724;
  --primitive-neutral-900: #0f0f0f;

  --primitive-success: #5b9e73;
  --primitive-warning: #d9a544;
  --primitive-error: #d64545;

  /* - LAYER 2: SEMANTIC ALIASES (dark theme = default) - */
  --color-primary: var(--primitive-malva);
  --color-primary-soft: rgba(184, 130, 232, .20);
  --color-secondary: var(--primitive-laranja);
  --color-accent: var(--primitive-malva);

  --color-neutral-50: var(--primitive-neutral-50);
  --color-neutral-100: var(--primitive-neutral-100);
  --color-neutral-200: var(--primitive-neutral-200);
  --color-neutral-300: var(--primitive-neutral-300);
  --color-neutral-400: var(--primitive-neutral-400);
  --color-neutral-500: var(--primitive-neutral-500);
  --color-neutral-600: var(--primitive-neutral-600);
  --color-neutral-700: var(--primitive-neutral-700);
  --color-neutral-800: var(--primitive-neutral-800);
  --color-neutral-900: var(--primitive-neutral-900);

  --color-success: var(--primitive-success);
  --color-warning: var(--primitive-warning);
  --color-error: var(--primitive-error);

  --surface-primary: #2f1533;
  --surface-secondary: #3a1a40;
  --surface-tertiary: #451f4d;
  --surface-elevated: #3d1c44;
  --surface-glass: rgba(237, 234, 229, .055);
  --surface-glass-strong: rgba(237, 234, 229, .09);

  --color-text: #edeae5;
  --color-text-secondary: rgba(237, 234, 229, .72);
  --color-text-muted: rgba(237, 234, 229, .52);
  --color-text-faint: rgba(237, 234, 229, .34);
  --color-text-on-primary: var(--primitive-roxo);

  --color-bg: var(--surface-primary);

  --border-subtle: rgba(184, 130, 232, .10);
  --border-default: rgba(184, 130, 232, .18);
  --border-strong: rgba(184, 130, 232, .30);

  --shadow-card: 0 22px 44px -24px rgba(15, 5, 18, .8), 0 1px 0 rgba(237, 234, 229, .05) inset;

  /* - TYPOGRAPHY - */
  --font-display: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-ui: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-hero: clamp(56px, 8vw, 120px);   /* title, 100% */
  --text-h2: clamp(34px, 5vw, 68px);      /* subtitle-scale, ~40% of hero at max */
  --text-h3: 22px;
  --text-body: 17px;                       /* ~30% of hero at max */
  --text-small: 14px;                      /* ~20% of hero at max */
  --text-meta: 11px;

  --leading-tight: .98;
  --leading-snug: 1.15;
  --leading-normal: 1.62;
  --leading-relaxed: 1.75;

  --tracking-tight: -.01em;
  --tracking-normal: 0;
  --tracking-wide: .13em;

  /* - SPACING (8px system) - */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-section-y: clamp(108px, 10.8vw, 180px);
  --space-section-x: clamp(32px, 5.8vw, 92px);

  /* - RADIUS - */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --shape-cut: 26px;         /* signature asymmetric cut, cards/media only */
  --shape-cut-lg: clamp(28px, 3vw, 56px);

  /* - MOTION - */
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-medium: 400ms;
  --duration-slow: 600ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);

  /* - Z-INDEX - */
  --z-header: 10;
  --z-overlay: 60;
  --z-modal: 70;
  --z-toast: 80;

  /* - LAYOUT v5 (layout do cliente 2026-07-26: barra de topo + hero em dois painéis) - */
  /* Margens laterais aumentadas a pedido do cliente (item 15): o conteúdo
     estava encostando na borda. `--shell-max` substitui o 1720px que estava
     repetido em cada sessão. */
  --shell-pad: clamp(20px, 5vw, 88px);        /* respiro lateral da página inteira */
  --shell-max: 1560px;                        /* largura útil do grid */
  --space-section-half: calc(var(--space-section-y) / 2);
  /* barra retangular presa no topo (item 1). Mais alta que a pílula antiga:
     é ela que dita a altura do CTA e do botão de menu, que precisam de 44px
     de alvo de toque. */
  --topbar-h: clamp(64px, 4.8vw, 78px);
  --topbar-gap: 6px;                          /* folga entre a barra e o botão circular */
  --panel-gap: clamp(12px, 2.3vw, 34px);      /* entre os dois painéis da hero */
  --panel-r: clamp(22px, 2.6vw, 42px);        /* raio dos painéis grandes */
  /* recortes dos dois painéis da hero. Mesma largura e mesma altura nos dois:
     o vazio central sai reto e simétrico em relação à folga. */
  --panel-cut-w: clamp(48px, 4.4vw, 68px);
  --panel-cut-h: clamp(56px, 5vw, 74px);

  /* botão "quem conduz" no canto inferior-direito da foto. O recorte (slot) é do
     tamanho do botão + folga, então o botão flutua com os quatro cantos à vista. */
  --card-face: clamp(38px, 3.2vw, 46px);      /* lado do rosto */
  --card-pad: clamp(12px, 1.3vw, 18px);       /* respiro interno do botão */
  --card-gap: clamp(10px, 1vw, 14px);         /* folga entre a foto e o botão */
  --card-r: clamp(14px, 1.5vw, 24px);
  --card-h: calc(var(--card-face) + var(--card-pad) * 2);
  --slot-h: calc(var(--card-h) + var(--card-gap) * 2);
  --panel-fillet: clamp(14px, 1.6vw, 24px);   /* raio dos três arcos de cada recorte */
  --panel-pad: clamp(26px, 3.6vw, 62px);
  /* Recuo interno dos painéis que carregam texto (números, método, contato).
     Único para os três. A borda do painel acompanha a da hero, então esse
     valor é o quanto o conteúdo se afasta da linha do grid - o cliente pediu
     folga generosa, mesmo custando esse desencontro. */
  --panel-pad-x: clamp(24px, 3.6vw, 62px);
  --cue-size: clamp(22px, 2vw, 30px);         /* seta de scroll, centrada no vazio */

  --surface-panel-brand: var(--primitive-malva);
  --surface-topbar: var(--primitive-roxo);

  --text-panel-title: clamp(33px, 3.9vw, 62px);
  --text-stat: clamp(38px, 4.4vw, 68px);      /* números da régua de prova social */

  /* pilha de projetos (Sessão 4). O tipo gigante usa line-height < 1 de
     propósito: a perna do "g" estoura a caixa e o card seguinte cobre. */
  --text-giant: clamp(52px, 11.2vw, 164px);
  --giant-lh: .82;
  --giant-indent: clamp(0px, 19vw, 280px);
  --stack-top: calc(var(--topbar-h) + clamp(16px, 2vw, 34px));

  /* bento de resultados (Sessão 6). Recorte menor que o dos painéis da hero:
     o selo de seta é que dita o tamanho. */
  --bento-r: clamp(20px, 2.2vw, 34px);
  --bento-gap: clamp(12px, 1.3vw, 20px);
  --bento-selo: clamp(38px, 3.4vw, 50px);
  --bento-cut: calc(var(--bento-selo) + clamp(10px, 1vw, 16px));
  --bento-fillet: clamp(14px, 1.5vw, 24px);

  /* aba do rodapé subindo no gradiente da Sessão 11 */
  --rodape-fillet-x: clamp(56px, 11.5vw, 200px); /* a curva abre mais na horizontal */
  /* fillet-y sai de aba - raio, no CSS; aqui só a aba manda */
  /* recuo = largura do filete: a curva termina exatamente na borda da página,
     senão sobra uma faixa de gradiente e a emenda com o rodapé vira degrau */
  --rodape-inset: var(--rodape-fillet-x);
  --rodape-aba: clamp(86px, 9.6vw, 164px);
  --rodape-r: clamp(28px, 3.6vw, 60px);

  /* base do mesh da Sessão 11: mistura entre laranja e malva, não são
     primitivas da marca, por isso vivem aqui como token próprio */
  --grad-base-quente: #b9503a;
  --grad-base-frio: #9a6ecd;

  /* fileira de box da Sessão 3 (silhueta da referência: retângulo alto e
     muito arredondado, encostados com folga mínima) */
  /* box de desafios. O cliente achou a versão preenchida "grade e desajeitada"
     (item 3): agora é só contorno, mais baixo e com folga maior entre eles. */
  --box-h: clamp(84px, 7.6vw, 104px);
  --box-r: clamp(24px, 3.8vw, 52px);          /* ~50% da altura, pílula mais baixa */
  --box-gap: clamp(10px, 1.1vw, 16px);        /* entre os box */
  --box-seta: clamp(20px, 1.9vw, 26px);
  --box-gap-in: clamp(8px, 1vw, 14px);        /* entre o texto e a flecha */
  /* metade do bloco da flecha: é o quanto o texto desce pra parecer centrado
     enquanto a flecha está escondida, e o quanto ele sobe no hover */
  --seta-shift: calc((var(--box-seta) + var(--box-gap-in)) / 2);
  --text-label: 12px;                         /* labels de UI em caixa alta + tracking */

  /* par rótulo + H2: mesma distância e mesma entrelinha em toda a página */
  --eyebrow-gap: clamp(12px, 1.2vw, 18px);
  --leading-h2: 1.08;   /* folga suficiente para acento não encostar em perna */
}

[data-theme="light"] {
  --surface-primary: #edeae5;
  --surface-secondary: #f5f3ef;
  --surface-tertiary: #e2ddd4;
  --surface-elevated: #ffffff;
  --surface-glass: rgba(255, 255, 255, .70);
  --surface-glass-strong: rgba(255, 255, 255, .90);

  --color-text: #2f1533;
  --color-text-secondary: rgba(47, 21, 51, .72);
  --color-text-muted: rgba(47, 21, 51, .52);
  --color-text-faint: rgba(47, 21, 51, .36);

  --color-bg: var(--surface-primary);

  --border-subtle: rgba(47, 21, 51, .08);
  --border-default: rgba(47, 21, 51, .14);
  --border-strong: rgba(47, 21, 51, .24);

  /* Brand color role-swap: Roxo becomes the primary/CTA color in light theme. Malva stays decorative. */
  --color-primary: var(--primitive-roxo);
  --color-primary-soft: rgba(47, 21, 51, .12);
  --color-text-on-primary: var(--primitive-cinza);

  --shadow-card: 0 18px 40px -30px rgba(47, 21, 51, .22), 0 1px 0 rgba(255, 255, 255, .9) inset;
}