/* Check Aí — tokens digitais oficiais.
 * Valores de referência equivalentes a brand-tokens.json.
 * Fontes: carregar os arquivos licenciados indicados no índice da marca.
 * Este arquivo não pressupõe nomes ou URLs de assets.
 */
:root {
  /* Identidade */
  --check-ai-color-sky: #79B8DE;
  --check-ai-color-mint: #87D2B6;
  --check-ai-color-ink: #21465E;
  --check-ai-color-green: #2F7B65;
  --check-ai-color-snow: #F6FAFC;
  --check-ai-color-gray: #5B6F7D;
  --check-ai-color-white: #FFFFFF;

  /* Semântica da interface */
  --check-ai-background: var(--check-ai-color-snow);
  --check-ai-surface: var(--check-ai-color-white);
  --check-ai-surface-sky: var(--check-ai-color-sky);
  --check-ai-surface-mint: var(--check-ai-color-mint);
  --check-ai-text: var(--check-ai-color-ink);
  --check-ai-text-muted: var(--check-ai-color-gray);
  --check-ai-text-on-pastel: var(--check-ai-color-ink);
  --check-ai-link: var(--check-ai-color-green);
  --check-ai-button-background: var(--check-ai-color-green);
  --check-ai-button-foreground: var(--check-ai-color-white);
  --check-ai-button-hover-background: var(--check-ai-color-ink);
  --check-ai-button-hover-foreground: var(--check-ai-color-white);
  --check-ai-focus-ring: var(--check-ai-color-ink);
  --check-ai-focus-gap: var(--check-ai-color-white);
  --check-ai-border-strong: var(--check-ai-color-gray);
  --check-ai-border-decorative: #DBE8EE;

  /* Status funcionais; não substituem a paleta da marca. */
  --check-ai-status-success-foreground: #27664A;
  --check-ai-status-success-background: #EAF5EE;
  --check-ai-status-attention-foreground: #7A5B17;
  --check-ai-status-attention-background: #FFF6D8;
  --check-ai-status-critical-foreground: #A63D46;
  --check-ai-status-critical-background: #FCEEF0;
  --check-ai-status-information-foreground: #245F85;
  --check-ai-status-information-background: #EDF5FB;

  /* Tipografia */
  --check-ai-font-display: "Manrope", "Inter", Arial, sans-serif;
  --check-ai-font-body: "Inter", "Manrope", Arial, sans-serif;
  --check-ai-weight-regular: 400;
  --check-ai-weight-medium: 500;
  --check-ai-weight-semibold: 600;
  --check-ai-weight-bold: 700;
  --check-ai-weight-extrabold: 800;
  --check-ai-type-display-size: clamp(2.25rem, 4vw, 3.75rem);
  --check-ai-type-display-weight: 700;
  --check-ai-type-display-line-height: 1.12;
  --check-ai-type-display-letter-spacing: -0.03em;
  --check-ai-type-heading-size: clamp(1.75rem, 2.5vw, 2.5rem);
  --check-ai-type-heading-weight: 700;
  --check-ai-type-heading-line-height: 1.2;
  --check-ai-type-heading-letter-spacing: -0.02em;
  --check-ai-type-subheading-size: 1.25rem;
  --check-ai-type-subheading-weight: 600;
  --check-ai-type-subheading-line-height: 1.35;
  --check-ai-type-subheading-letter-spacing: 0;
  --check-ai-type-body-size: 1rem;
  --check-ai-type-body-weight: 400;
  --check-ai-type-body-line-height: 1.6;
  --check-ai-type-body-letter-spacing: 0;
  --check-ai-type-small-size: 0.875rem;
  --check-ai-type-small-weight: 400;
  --check-ai-type-small-line-height: 1.5;
  --check-ai-type-small-letter-spacing: 0;
  --check-ai-type-button-size: 1rem;
  --check-ai-type-button-weight: 600;
  --check-ai-type-button-line-height: 1.25;
  --check-ai-type-button-letter-spacing: 0;

  /* Geometria: cantos moderados e escala de espaçamento */
  --check-ai-radius-small: 0.5rem;
  --check-ai-radius-medium: 0.75rem;
  --check-ai-radius-large: 1rem;
  --check-ai-space-1: 0.25rem;
  --check-ai-space-2: 0.5rem;
  --check-ai-space-3: 0.75rem;
  --check-ai-space-4: 1rem;
  --check-ai-space-6: 1.5rem;
  --check-ai-space-8: 2rem;
  --check-ai-space-12: 3rem;
  --check-ai-space-16: 4rem;
  --check-ai-focus-width: 3px;
  --check-ai-focus-offset: 3px;
  --check-ai-target-min: 44px;
}

/* Opt-in: aplique esta classe aos controles que precisam do foco padrão. */
.check-ai-focus-ring:focus-visible {
  outline: var(--check-ai-focus-width) solid var(--check-ai-focus-ring);
  outline-offset: var(--check-ai-focus-offset);
  box-shadow: 0 0 0 var(--check-ai-focus-offset) var(--check-ai-focus-gap);
}