/* Central Praia · Design System v1 · 2026-10-06
   Paleta e famílias do DNA/brandbook; medidas e semântica derivadas nesta v1.
   Este arquivo entrega tokens, não componentes nem carregamento de fontes.
   Instale/carregue as quatro famílias aprovadas antes da QA visual. */
:root, [data-cp-theme="light"] {
  --cp-cal: #EAE3DC;
  --cp-concreto: #C5BEB5;
  --cp-cimento: #A7A19A;
  --cp-asfalto: #0D0816;
  --cp-grafite: #2B2730;
  --cp-coral: #D7474E;
  --cp-obra: #DF7026;
  --cp-sodio: #F1B94E;
  --cp-pink: #F31F78;
  --cp-corpo: #17131D;
  --cp-apoio: #514B58;
  --cp-legenda: #746D78;
  --cp-linha: #B4ADA6;

  --cp-bg: var(--cp-cal);
  --cp-surface: var(--cp-cal);
  --cp-surface-muted: var(--cp-concreto);
  --cp-surface-strong: var(--cp-asfalto);
  --cp-text: var(--cp-corpo);
  --cp-text-strong: var(--cp-asfalto);
  --cp-text-muted: var(--cp-apoio);
  --cp-text-on-dark: var(--cp-cal);
  --cp-text-muted-on-dark: var(--cp-concreto);
  --cp-border: var(--cp-linha);
  --cp-border-control: var(--cp-apoio);
  --cp-accent: var(--cp-coral);
  --cp-on-accent: var(--cp-asfalto);
  --cp-link: var(--cp-asfalto);
  --cp-focus-light: var(--cp-cal);
  --cp-focus-dark: var(--cp-asfalto);
  --cp-disabled-bg: var(--cp-concreto);
  --cp-disabled-text: var(--cp-apoio);
  --cp-disabled-border: var(--cp-cimento);
  --cp-selected-bg: var(--cp-asfalto);
  --cp-selected-text: var(--cp-cal);
  --cp-feedback-bg: var(--cp-cal);
  --cp-feedback-text: var(--cp-corpo);
  --cp-feedback-border: var(--cp-apoio);
  --cp-warning-bg: var(--cp-sodio);
  --cp-warning-text: var(--cp-asfalto);

  --cp-font-display: "Archivo Expanded", "Arial Black", sans-serif;
  --cp-font-editorial: "Syne", sans-serif;
  --cp-font-body: "Inter Tight", "Arial", sans-serif;
  --cp-font-data: "Martian Mono", "Courier New", monospace;
  --cp-space-0: 0rem;
  --cp-space-4: 0.25rem;
  --cp-space-8: 0.5rem;
  --cp-space-12: 0.75rem;
  --cp-space-16: 1rem;
  --cp-space-20: 1.25rem;
  --cp-space-24: 1.5rem;
  --cp-space-32: 2rem;
  --cp-space-40: 2.5rem;
  --cp-space-48: 3rem;
  --cp-space-64: 4rem;
  --cp-space-80: 5rem;
  --cp-space-96: 6rem;
  --cp-space-128: 8rem;
  --cp-radius-none: 0;
  --cp-radius-sm: 4px;
  --cp-radius-md: 8px;
  --cp-border-width: 1px;
  --cp-border-width-strong: 2px;
  --cp-border-width-editorial: 4px;
  --cp-content-max: 80rem;
  --cp-text-max: 65ch;
  --cp-grid-columns: 4;
  --cp-grid-gutter: 1rem;
  --cp-page-margin: 1rem;
  --cp-section-gap: 3rem;
  --cp-control-height: 3rem;
  --cp-control-height-compact: 2.75rem;
  --cp-target-size: 3rem;
  --cp-shadow: none;
  --cp-focus-shadow: 0 0 0 2px var(--cp-focus-light), 0 0 0 4px var(--cp-focus-dark);
  --cp-duration-fast: 120ms;
  --cp-duration-standard: 180ms;
  --cp-duration-slow: 240ms;
  --cp-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --cp-z-base: 0;
  --cp-z-sticky: 10;
  --cp-z-dropdown: 20;
  --cp-z-overlay: 30;
  --cp-z-dialog: 40;
  --cp-z-toast: 50;
  --cp-type-display-xl-size: 2.5rem;
  --cp-type-display-xl-line: 1.0;
  --cp-type-display-xl-weight: 900;
  --cp-type-display-xl-tracking: -0.035em;
  --cp-type-display-lg-size: 2rem;
  --cp-type-display-lg-line: 1.05;
  --cp-type-display-lg-weight: 900;
  --cp-type-display-lg-tracking: -0.03em;
  --cp-type-heading-1-size: 1.75rem;
  --cp-type-heading-1-line: 1.1;
  --cp-type-heading-1-weight: 800;
  --cp-type-heading-1-tracking: -0.025em;
  --cp-type-heading-2-size: 1.5rem;
  --cp-type-heading-2-line: 1.15;
  --cp-type-heading-2-weight: 800;
  --cp-type-heading-2-tracking: -0.02em;
  --cp-type-heading-3-size: 1.25rem;
  --cp-type-heading-3-line: 1.2;
  --cp-type-heading-3-weight: 800;
  --cp-type-heading-3-tracking: -0.01em;
  --cp-type-editorial-size: 1.75rem;
  --cp-type-editorial-line: 1.05;
  --cp-type-editorial-weight: 800;
  --cp-type-editorial-tracking: -0.02em;
  --cp-type-body-lg-size: 1.125rem;
  --cp-type-body-lg-line: 1.5;
  --cp-type-body-lg-weight: 400;
  --cp-type-body-lg-tracking: 0em;
  --cp-type-body-size: 1rem;
  --cp-type-body-line: 1.5;
  --cp-type-body-weight: 400;
  --cp-type-body-tracking: 0em;
  --cp-type-body-sm-size: 0.875rem;
  --cp-type-body-sm-line: 1.5;
  --cp-type-body-sm-weight: 400;
  --cp-type-body-sm-tracking: 0em;
  --cp-type-label-size: 1rem;
  --cp-type-label-line: 1.25;
  --cp-type-label-weight: 600;
  --cp-type-label-tracking: 0em;
  --cp-type-data-size: 0.875rem;
  --cp-type-data-line: 1.5;
  --cp-type-data-weight: 500;
  --cp-type-data-tracking: 0em;
  --cp-type-data-lg-size: 1.75rem;
  --cp-type-data-lg-line: 1.2;
  --cp-type-data-lg-weight: 600;
  --cp-type-data-lg-tracking: -0.02em;
  --cp-type-micro-size: 0.75rem;
  --cp-type-micro-line: 1.5;
  --cp-type-micro-weight: 500;
  --cp-type-micro-tracking: 0em;
}

/* Blocos escuros: revisar componentes e gráficos dentro do contexto. */
[data-cp-theme="dark"] {
  --cp-bg: var(--cp-asfalto);
  --cp-surface: var(--cp-grafite);
  --cp-surface-muted: var(--cp-grafite);
  --cp-surface-strong: var(--cp-cal);
  --cp-text: var(--cp-cal);
  --cp-text-strong: var(--cp-cal);
  --cp-text-muted: var(--cp-concreto);
  --cp-border: var(--cp-apoio);
  --cp-border-control: var(--cp-concreto);
  --cp-link: var(--cp-cal);
  --cp-selected-bg: var(--cp-cal);
  --cp-selected-text: var(--cp-asfalto);
  --cp-feedback-bg: var(--cp-grafite);
  --cp-feedback-text: var(--cp-cal);
  --cp-feedback-border: var(--cp-concreto);
}

/* Escolher somente um acento dominante por composição. */
[data-cp-accent="obra"] {
  --cp-accent: var(--cp-obra);
  --cp-on-accent: var(--cp-asfalto);
}

@media (min-width: 600px) {
  :root, [data-cp-theme="light"], [data-cp-theme="dark"] {
    --cp-grid-columns: 8;
    --cp-grid-gutter: 1.5rem;
    --cp-page-margin: 1.5rem;
  }
}

@media (min-width: 1024px) {
  :root, [data-cp-theme="light"], [data-cp-theme="dark"] {
    --cp-grid-columns: 12;
    --cp-grid-gutter: 1.5rem;
    --cp-page-margin: 2.5rem;
    --cp-section-gap: 5rem;
    --cp-type-display-xl-size: 5rem;
    --cp-type-display-lg-size: 3.5rem;
    --cp-type-heading-1-size: 2.5rem;
    --cp-type-heading-2-size: 1.75rem;
    --cp-type-heading-3-size: 1.25rem;
    --cp-type-editorial-size: 2.5rem;
    --cp-type-body-lg-size: 1.25rem;
    --cp-type-body-size: 1rem;
    --cp-type-body-sm-size: 0.875rem;
    --cp-type-label-size: 1rem;
    --cp-type-data-size: 0.875rem;
    --cp-type-data-lg-size: 2rem;
    --cp-type-micro-size: 0.75rem;
  }
}

@media (min-width: 1440px) {
  :root, [data-cp-theme="light"], [data-cp-theme="dark"] {
    --cp-grid-gutter: 2rem;
    --cp-page-margin: 3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root, [data-cp-theme="light"], [data-cp-theme="dark"] {
    --cp-duration-fast: 0ms;
    --cp-duration-standard: 0ms;
    --cp-duration-slow: 0ms;
  }
}

/* Padrão para implementar no componente, sem aplicar reset global:
   :focus-visible { outline: 2px solid transparent; outline-offset: 4px;
                    box-shadow: var(--cp-focus-shadow); }
   @media (forced-colors: active) {
     :focus-visible { outline: 2px solid Highlight; outline-offset: 3px; box-shadow: none; }
   }
   Não cortar o anel com overflow:hidden. Este comentário não estiliza foco. */