:root {
  /* --------------------------------------------------------------------------
     Cores base
     -------------------------------------------------------------------------- */
  --color-bg: #f7fbff;
  --color-bg-strong: #e3eaf2;
  --color-bg-dark: #062847;
  --color-bg-subtle: #e3eaf2;
  --color-bg-glow: #f7fbff;
  --color-surface: #ffffff;
  --color-surface-muted: #ffffff;
  --color-surface-soft: #ffffff;
  --color-surface-glass: #ffffff;
  --color-border: #d4dde9;
  --color-border-soft: #e3eaf2;
  --color-border-strong: #afc0d3;
  --color-text: #132238;
  --color-heading: #071a33;
  --color-muted: #52657a;
  --color-muted-strong: #334c63;
  --color-subtle: #71839a;
  --color-primary: #0b3a66;
  --color-primary-strong: #062847;
  --color-primary-dark: #062847;
  --color-primary-hover: #082f55;
  --color-primary-bright: #155b9a;
  --color-primary-soft: #e3eaf2;
  --color-on-accent: var(--color-primary-dark);
  /* Halo de foco. Era usado sem estar definido, entao .cv-data-table-shell
     ficava sem anel de foco visivel (D-06). */
  --color-focus-ring: rgba(21, 91, 154, 0.22);
  /* HT-01: o anel de :focus-visible, opaco e com contraste medido. Token
     proprio, e nao `--color-focus`, porque aquele e redefinido dentro de
     `roteiros.css:3292` como a cor da borda — um componente nao pode apagar o
     indicador de foco por acidente. Medido contra o que fica ao lado dele:
     6,53:1 na pagina, 7,01:1 no card, 5,02:1 na borda do campo (WCAG 2.4.11
     pede 3:1). */
  --color-focus-visible-ring: #155b9a;
  --color-secondary: #155b9a;
  --color-secondary-hover: #17476f;
  --color-secondary-soft: #deebfb;
  --color-accent: #d8a21b;
  --color-accent-hover: #b8860b;
  --color-accent-soft: #fff3cf;
  --color-danger: #b42318;
  --color-danger-soft: #fff2f0;
  --color-warning: #d8a21b;
  --color-warning-soft: #fff3cf;
  --color-warning-border: var(--color-accent-border-strong);
  --color-success: #16805a;
  --color-success-soft: #e5f6ef;
  --color-info: #155b9a;
  --color-info-soft: #deebfb;
  --color-white: #ffffff;
  --color-danger-border-soft: rgba(180, 35, 24, 0.24);
  --color-danger-border-strong: rgba(180, 35, 24, 0.38);
  --color-info-border-strong: rgba(21, 91, 154, 0.48);
  --color-success-border-soft: rgba(22, 128, 90, 0.28);
  --color-accent-border-soft: rgba(216, 162, 27, 0.35);
  --color-accent-border-strong: rgba(216, 162, 27, 0.45);

  /* --------------------------------------------------------------------------
     Sombras (escala base + aliases semanticos)
     -------------------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(7, 26, 51, 0.06);
  --shadow-sm: 0 6px 16px rgba(7, 26, 51, 0.1);
  --shadow-md: 0 14px 34px rgba(7, 26, 51, 0.16);
  --shadow-lg: 0 24px 60px rgba(7, 26, 51, 0.2);
  --shadow-inner: inset 0 1px 0 rgba(255, 255, 255, 0.55);
  --shadow-soft: var(--shadow-sm);
  --shadow-card: var(--shadow-md);
  --shadow-panel: 0 18px 40px rgba(7, 26, 51, 0.16);
  --shadow-section: 0 18px 36px rgba(15, 34, 54, 0.08);
  --shadow-elevated: var(--shadow-lg);
  --shadow-strong: 0 20px 44px rgba(15, 34, 54, 0.1);
  --shadow-inner-light: var(--shadow-inner);
  --glow-primary: 0 0 0 1px rgba(21, 91, 154, 0.12), 0 14px 34px rgba(11, 58, 102, 0.28);
  --glow-accent: 0 14px 34px rgba(216, 162, 27, 0.22);

  /* --------------------------------------------------------------------------
     Espacamento (escala + aliases de contexto)
     -------------------------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-field-gap: var(--space-2);
  --space-form-gap: var(--space-4);
  --space-card-x: var(--space-4);
  --space-card-y: var(--space-4);
  --space-section-x: var(--space-5);
  --space-section-y: var(--space-5);

  /* --------------------------------------------------------------------------
     Raios (escala + aliases semanticos)
     -------------------------------------------------------------------------- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-control: 12px;
  --radius-control-lg: var(--radius-md);
  --radius-card: 16px;
  --radius-panel: 18px;
  --radius-section: 18px;
  --radius-shell: 22px;
  --radius-map: var(--radius-panel);
  --radius-pill: 999px;
  --radius-full: var(--radius-pill);
  --cv-btn-radius: var(--radius-pill);
  --cv-field-radius: var(--radius-control);
  --cv-card-radius: var(--radius-card);

  /* --------------------------------------------------------------------------
     Tipografia
     -------------------------------------------------------------------------- */
  --font-size-2xs: 11px;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-base: var(--font-size-md);
  --font-size-lg: 20px;
  --font-size-xl: 24px;
  --font-size-2xl: 32px;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;
  --letter-spacing-eyebrow: 0.12em;
  --letter-spacing-label: 0.06em;
  --letter-spacing-chip: 0.04em;

  /* --------------------------------------------------------------------------
     Controles e interacao
     -------------------------------------------------------------------------- */
  --control-height-sm: 34px;
  --control-height-md: 44px;
  --control-height-lg: 52px;
  --text-area-height-md: 88px;
  --text-area-height-lg: 176px;
  --text-area-height-justificativa: 220px;
  --cv-btn-height: var(--control-height-md);
  --cv-btn-padding-x: 13px;
  --cv-btn-gap: 5px;
  --cv-btn-icon-size: 17px;
  --cv-field-height: var(--control-height-md);
  --cv-field-padding-x: var(--space-3);
  --cv-field-border: 1px solid var(--color-border-strong);
  --cv-field-bg: var(--color-surface);
  --cv-field-focus-ring: 0 0 0 3px rgba(21, 91, 154, 0.28);
  --cv-card-border: 1px solid var(--color-border);
  --cv-card-shadow: var(--shadow-card);

  /* --------------------------------------------------------------------------
     Motion (duracao + easing + aliases semanticos)
     -------------------------------------------------------------------------- */
  --ease-standard: ease;
  --ease-emphasis: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-fast: 140ms;
  --duration-base: 160ms;
  --duration-normal: var(--duration-base);
  --duration-slow: 220ms;
  --transition-fast: var(--duration-fast) var(--ease-standard);
  --transition-base: var(--duration-base) var(--ease-standard);
  --transition-slow: var(--duration-slow) var(--ease-standard);

  /* --------------------------------------------------------------------------
     Pilha de camadas
     -------------------------------------------------------------------------- */
  --font-sans: "Segoe UI", Arial, sans-serif;
  --z-background: 0;
  --z-page-shell: 1;
  --z-stepper: 2;
  --z-footer-actions: 10;
  --z-footer-actions-fixed: 10;
  --z-sidebar: 20;
  --z-dropdown: 50;
  --z-overlay: 60;
  --z-modal: 100;
  --z-toast: 120;
  --z-sticky-stepper: 1100;

  /* --------------------------------------------------------------------------
     Breakpoints (R-01) — escala fechada para @media (min|max)-width.
     Custom properties sao referencia para JS/documentacao; @media usa px literal
     (propriedades CSS nao funcionam dentro de @media nos browsers).

     Escala fechada — use SOMENTE estes valores em @media width:
       420  520  600  640  720  721  768  800  820  840  841  900
       1080  1180  1181  1400  1480

     Companions (*-min): 721 = xl+1, 841 = 2xl+1, 1181 = 5xl+1 — pares de
     min-width para nao sobrepor max-width do degrau anterior no mesmo px.
     -------------------------------------------------------------------------- */
  --breakpoint-xs: 420px;
  --breakpoint-sm: 520px;
  --breakpoint-md: 600px;
  --breakpoint-lg: 640px;
  --breakpoint-xl: 720px;
  --breakpoint-xl-min: 721px;
  --breakpoint-tablet: 768px;
  --breakpoint-xl-upper: 800px;
  --breakpoint-2xl-entry: 820px;
  --breakpoint-2xl: 840px;
  --breakpoint-2xl-min: 841px;
  --breakpoint-3xl: 900px;
  --breakpoint-4xl: 1080px;
  --breakpoint-5xl: 1180px;
  --breakpoint-5xl-min: 1181px;
  --breakpoint-6xl: 1400px;
  --breakpoint-7xl: 1480px;

  /* Shell: sidebar fixa em % da viewport; conteudo usa o restante (grid em layout.css). */
  --sidebar-width: 15%;
  --page-max-width: 100%;

  /* --------------------------------------------------------------------------
     Espaco 7 (28px) — alias ausente; corrige uso em dashboard.css
     -------------------------------------------------------------------------- */
  --space-7: 28px;

  /* --------------------------------------------------------------------------
     API publica do design system — tokens --app-*
     Alias estaveis para radius, espaco e tipografia (nao mudam por tema).
     Tokens de cor ficam em theme.css pois variam entre light e dark.
     -------------------------------------------------------------------------- */

  /* Radius */
  --app-radius-sm: var(--radius-sm);
  --app-radius-md: var(--radius-md);
  --app-radius-lg: var(--radius-lg);
  --app-radius-xl: var(--radius-xl);

  /* Espaco */
  --app-space-1: var(--space-1);
  --app-space-2: var(--space-2);
  --app-space-3: var(--space-3);
  --app-space-4: var(--space-4);
  --app-space-5: var(--space-5);

  /* Tipografia */
  --app-font-family: var(--font-sans);
  --app-font-size-xs: var(--font-size-xs);
  --app-font-size-sm: var(--font-size-sm);
  --app-font-size-md: var(--font-size-md);
  --app-font-size-lg: var(--font-size-lg);
  --app-font-size-xl: var(--font-size-xl);
  --app-font-weight-normal: 400;
  --app-font-weight-semibold: var(--font-weight-semibold);
  --app-font-weight-bold: var(--font-weight-bold);

  /* Motion */
  --app-duration-fast: var(--duration-fast);
  --app-duration-base: var(--duration-base);
  --app-duration-slow: var(--duration-slow);
  --app-ease-standard: var(--ease-standard);

  /* Z-index */
  --app-z-sidebar: var(--z-sidebar);
  --app-z-dropdown: var(--z-dropdown);
  --app-z-modal: var(--z-modal);
  --app-z-toast: var(--z-toast);
}