/*
  tokens.css: Escala Corretor, tema claro "Papel" (design system Escala).

  Tudo o que é visual mora aqui: cores, fonte, tamanhos, raios, espaços, bordas, tempos e curvas.
  layout.css e motion.css só usam estas variáveis; nenhum valor visual é escrito neles.
  Regra dos nomes: papel primeiro, valor nunca (--color-text-primary, não --color-ink).

  Origem dos valores:
    [DS]       veio do PR #1757 do concilia-seg (apps/web/src/app/globals.css, branch feat/escala-tema-ds).
    [derivado] o PR não traz; foi derivado aqui de forma coerente com o DS (listado no RELATORIO.md).
  O pacote completo do DS (tokens.json, componentes, guias) não está na VPS. Quando chegar,
  conferir os [derivado] e trocar só os valores deste arquivo.

  Pontos de quebra (variável não funciona em @media, por isso só documentados):
    tablet  48rem (768 px)
    desktop 64rem (1024 px)
  Se mudar aqui, mude os mesmos valores nos @media do layout.css e do motion.css.

  Tema escuro: não entra nesta entrega (o DS trata o escuro como opcional do sistema).
  Os nomes são semânticos, então o escuro depois é só um bloco de valores.
*/

:root {
  color-scheme: light;

  /* Cores: texto */
  --color-text-primary: #14202b; /* [DS] ink */
  --color-text-secondary: #5a646e; /* [DS] ink-subtle */
  --color-text-on-brand: #fffdf9; /* [DS] on-brand */
  --color-text-on-brand-muted: #c3ccd6; /* [derivado] 8,8:1 sobre brand */
  --color-text-success: #176b3f; /* [DS] success */
  --color-text-warning: #8a5300; /* [DS] warning */

  /* Cores: superfícies */
  --color-surface-page: #f5f3ee; /* [DS] canvas */
  --color-surface-raised: #fffdf9; /* [DS] surface */
  --color-surface-sunken: #eae7e0; /* [DS] surface-sunken */
  --color-surface-control: #e9e5dc; /* [DS] control */
  --color-surface-brand: #1c2b3d; /* [DS] brand (azul-tinta) */
  --color-surface-brand-tint: #e3e8ee; /* [DS] brand-tint */
  --color-surface-success: #e3f2ea; /* [DS] success-tint */
  --color-surface-warning: #fbf0dc; /* [DS] warning-tint */

  /* Cores: bordas e linhas finas */
  --color-border-default: #dcd8cf; /* [DS] border */
  --color-border-divider: #cfcabf; /* [DS] divider */
  --color-border-control: #857f73; /* [DS] border-strong (3,6:1 sobre canvas) */
  --color-border-on-brand: #404d5b; /* [derivado] linha fina sobre a faixa escura */
  --color-border-on-brand-strong: #7d8794; /* [derivado] 3,6:1 sobre brand */
  --color-border-warning: #8a5300; /* [DS] warning */

  /* Cores: ação (o botão único da página) */
  --color-action-background: #1c2b3d; /* [DS] brand */
  --color-action-background-hover: #192636; /* [derivado] brand com 12% de preto */
  --color-action-text: #fffdf9; /* [DS] on-brand */
  --color-action-inverse-background: #fffdf9; /* [derivado] botão sobre a faixa escura */
  --color-action-inverse-background-hover: #e9e5dc; /* [DS] control */
  --color-action-inverse-text: #1c2b3d; /* [DS] brand */

  /* Cores: foco de teclado */
  --color-focus-ring: #2f6fd6; /* [DS] focus */
  --color-focus-ring-on-brand: #8fbaf5; /* [DS] focus do tema escuro; o azul claro tem 2,99:1 sobre brand */

  /* Cores: barra de leitura */
  --color-progress: #2f6fd6; /* [DS] focus */

  /* Fonte */
  --font-family-base: "Instrument Sans", "Instrument Sans Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; /* [DS] Instrument Sans nas páginas públicas */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Tamanhos de texto (fluidos, mobile primeiro) [derivado] */
  --font-size-small: 0.875rem;
  --font-size-body: 1.0625rem;
  --font-size-lead: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --font-size-heading-3: 1.1875rem;
  --font-size-heading-2: clamp(1.75rem, 1.25rem + 2.4vw, 3rem);
  --font-size-heading-1: clamp(2.375rem, 1.35rem + 4.4vw, 4.25rem);
  --font-size-price: clamp(2.75rem, 1.7rem + 4.6vw, 4.5rem);

  /* Altura de linha e espaço entre letras [derivado] */
  --line-height-display: 1.04;
  --line-height-heading: 1.14;
  --line-height-body: 1.6;
  --line-height-tight: 1.35;
  --letter-spacing-display: -0.035em;
  --letter-spacing-heading: -0.022em;
  --letter-spacing-label: 0.01em;

  /* Espaçamento (base de 4 px) [derivado] */
  --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: 4.5rem;
  --space-section: clamp(2.75rem, 1.9rem + 3.6vw, 5rem);

  /* Raios [DS]: 2, 4 e 6 px, nunca pílula */
  --radius-small: 0.125rem;
  --radius-medium: 0.25rem;
  --radius-large: 0.375rem;
  --radius-dot: 50%; /* só o ponto de 6 px do selo */

  /* Bordas */
  --border-width-default: 1px;
  --border-width-strong: 2px;
  --border-style-placeholder: dashed;

  /* Larguras e margens [derivado] */
  --layout-content-width: 40rem;
  --layout-readable-width: 46rem;
  --layout-wide-width: 72rem;
  --layout-gutter: clamp(1.25rem, 0.6rem + 3vw, 2.5rem);
  --layout-panel-inset: clamp(0.5rem, 0.1rem + 1.8vw, 1.5rem);

  /* Tamanhos de peças */
  --size-tap-target-min: 3rem; /* 48 px; o piso é 44 px */
  --size-seal-dot: 0.375rem; /* [DS] ponto de 6 px */
  --size-icon: 1.25rem;
  --size-icon-stroke: 1.75;
  --size-seal-dot-offset: 0.5em;
  --size-icon-text-offset: 0.15em;
  --size-chevron-shift: 25%;
  --size-chevron-angle-closed: 45deg;
  --size-chevron-angle-open: -135deg;
  --size-step-marker: 2.25rem;
  --size-rail-width: 2px;
  --size-progress-height: 2px;
  --size-media-portrait-max: 11rem;
  --size-media-quote-min-height: 8rem;
  --size-sticky-bar-clearance: 5.5rem; /* altura da barra fixa do celular, para o foco não ficar embaixo dela */

  /* Movimento [derivado do estudo da referência, ver PLANO.md seção 3] */
  --motion-duration-fast: 160ms;
  --motion-duration-medium: 280ms;
  --motion-duration-reveal: 420ms;
  --motion-duration-line: 500ms;
  --motion-duration-draw: 900ms;
  --motion-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
  --motion-ease-out-strong: cubic-bezier(0.19, 1, 0.22, 1);
  --motion-ease-block: cubic-bezier(0.25, 0.1, 0.25, 1);
  --motion-distance-reveal: 0.625rem;
  --motion-distance-line: 0.35em;
  --motion-stagger: 60ms;
  --motion-takeover-scale-from: 0.97;
  --motion-takeover-opacity-from: 0.6;
  --motion-drift-distance: 0.5rem;
  --motion-dot-scale-from: 0.4;
  --motion-board-rows-start: 360ms;
  --motion-board-row-step: 75ms;
  --motion-board-dots-start: 720ms;
  --motion-board-dot-step: 80ms;
  --motion-board-footer-at: 1100ms;
  --motion-board-offset: 1.25rem;
  --motion-press-scale: 0.98;
  --motion-icon-shift: 0.25rem;
}

/* Telas maiores: o mesmo movimento, com mais distância e mais tempo */
@media (min-width: 48rem) {
  :root {
    --motion-duration-reveal: 560ms;
    --motion-duration-line: 700ms;
    --motion-distance-reveal: 1rem;
    --motion-distance-line: 0.6em;
    --motion-stagger: 80ms;
    --motion-takeover-scale-from: 0.94;
    --motion-drift-distance: 0.75rem;
    --motion-board-rows-start: 480ms;
    --motion-board-row-step: 100ms;
    --motion-board-dots-start: 960ms;
    --motion-board-dot-step: 110ms;
    --motion-board-footer-at: 1500ms;
    --motion-board-offset: 1.75rem;
  }
}