/* Tokens do site da Face Contábil. Papel e grafite são os do sistema irmão (../cadastro/web/css/tokens.css);
 * o vermelho é o do logo (#C52126), agora com presença: botão principal, faixas inteiras, carimbo.
 * Fontes: Exo 2 (títulos h1 e h2 e números dos passos, pesos reais de 100 a 900; os títulos usam 700 a 800) e
 * Archivo variável (texto, h3, rótulos e botões). As duas com licença OFL; copyright dentro dos arquivos.
 */

@font-face {
  font-family: "Exo 2";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/exo2-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/archivo-latin.woff2") format("woff2");
}

/* Arial com as medidas da Archivo 400: o texto não pula quando a fonte chega */
@font-face {
  font-family: "Archivo reserva";
  src: local("Arial"), local("ArialMT");
  size-adjust: 98.83%;
  ascent-override: 88.84%;
  descent-override: 21.25%;
  line-gap-override: 0%;
}

:root {
  color-scheme: light;

  /* papel e grafite: neutros puxados para o vermelho da marca, nunca cinza puro */
  --color-paper: oklch(97.6% 0.004 34);
  --color-paper-2: oklch(99.2% 0.005 40);
  --color-paper-3: oklch(94.1% 0.008 29);
  --color-ink: oklch(24.8% 0.006 1);
  --color-ink-2: oklch(39.9% 0.012 20);
  --color-muted: oklch(50.4% 0.012 22);
  --color-rule: oklch(87.9% 0.009 17);
  --color-field: oklch(62.9% 0.012 24);

  /* vermelho do logo (#C52126) */
  --color-accent: oklch(53.2% 0.197 26.1);
  --color-accent-hover: oklch(46.5% 0.18 27);
  --color-accent-ink: oklch(99.2% 0.005 40);
  --color-accent-ink-2: oklch(93% 0.03 30);
  --color-accent-rule: oklch(68% 0.14 26);
  --color-focus: oklch(53.2% 0.197 26.1);

  /* verde do WhatsApp (#25D366), só no botão flutuante; o texto em grafite dá 8,1:1 */
  --color-whats: oklch(76.1% 0.201 149.7);
  --color-whats-hover: oklch(68.7% 0.185 149.1);
  --color-whats-ink: oklch(24.8% 0.006 1);

  /* grafite de pasta: seções escuras, rodapé, véu do vídeo */
  --color-night: oklch(24.8% 0.006 1);
  --color-night-2: oklch(31% 0.008 15);
  --color-night-ink: oklch(97.6% 0.004 34);
  --color-night-muted: oklch(78% 0.01 25);
  --color-night-rule: oklch(38% 0.01 20);

  --font-display: "Exo 2", "Archivo", "Archivo reserva", sans-serif;
  --font-body: "Archivo", "Archivo reserva", ui-sans-serif, sans-serif;

  /* escala reduzida em 30/09 (pedido do Alan): corpo em 16 px, abertura de texto em 16 a 17 px, títulos 15 a 20% menores */
  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lead: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --text-lg: 1.125rem;
  --text-xl: 1.3125rem;
  /* o título cresce com a coluna (cqi) e nunca passa da palavra mais longa ("Departamento" = 7em na Exo 2 800) */
  --text-hero: clamp(2rem, 11cqi, 4.125rem);
  --text-h1: clamp(1.625rem, 10cqi, 3.125rem);
  --text-h2: clamp(1.5rem, 9cqi, 2.5rem);
  --text-h2-texto: clamp(1.25rem, 5.6cqi, 1.75rem);
  --text-h2-final: clamp(1.5rem, 5.4cqi, 2.625rem);
  --text-lema: clamp(1.125rem, 0.85rem + 1.2vw, 1.875rem);
  --peso-titulo: 800;
  --peso-titulo-leve: 700;
  --tracking-titulo: -0.015em;
  --text-passo: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);

  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-tela: 22px;

  --rule-hair: 1px solid var(--color-rule);
  --rule-field: 1.5px solid var(--color-field);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long: 420ms;
  --dur-topo: 360ms;

  --tap: 3.25rem;
  --prose: 36rem;
  --page-max: 76rem;
  --gutter: clamp(1.25rem, 0.8rem + 2.2vw, 3rem);
  --topo-h: 4.5rem;

  --shadow-topo: 0 12px 24px -18px oklch(24.8% 0.006 1 / 0.45);
  --shadow-tela: 0 28px 50px -30px oklch(20% 0.02 20 / 0.55);
  --shadow-carimbo: 0 10px 22px -12px oklch(20% 0.02 20 / 0.6);
  --shadow-flutuante: 0 12px 28px -12px oklch(20% 0.02 20 / 0.55);

  --z-raised: 10;
  --z-sticky: 200;
  --z-flutuante: 210;
}