:root {
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Neutros (light) — levemente tingidos de navy para casar com a marca */
  --color-page-bg: #F5F7FA;
  --color-surface: #FFFFFF;
  --color-surface-raised: #FFFFFF;
  --color-surface-sunken: #F1F4F8;
  --color-surface-hover: #EDF1F7;
  --color-border-strong: #C9D2DE;
  --color-border: #DCE3EC;
  --color-border-subtle: #E9EEF4;
  --color-text-primary: #101828;
  --color-text-secondary: #5A6473;
  --color-text-tertiary: #7A8493;
  --color-text-danger: #B42318;

  /* Acento / marca — verde é a cor de ação (decisão do time); "concluído" usa teal (ver status) */
  --color-accent: #15803D;
  --color-accent-hover: #116932;
  --color-accent-active: #0D5228;
  --color-accent-soft: #E8F5EE;
  --color-accent-ring: rgba(21, 128, 61, .28);
  --color-on-accent: #FFFFFF;
  --gradient-brand: linear-gradient(135deg, #0C447C 0%, #1B6BA8 55%, #17805E 100%);
  --color-portal-banner: var(--gradient-brand);
  --color-brand-navy: #0C447C;

  /* Status (semântico — nunca usado para ação) */
  --color-success: #0F766E;
  --color-success-bg: #E1F4F1;
  --color-success-border: #A9DDD5;
  --color-warning: #B25E09;
  --color-warning-bg: #FDF1DE;
  --color-warning-border: #EFC48A;
  --color-danger: #C0332B;
  --color-danger-bg: #FDECEA;
  --color-danger-border: #F0B0AA;
  --color-info: #175CB0;
  --color-info-bg: #E8F0FB;
  --color-info-border: #A9C6EB;

  /* Fases MGO */
  --f1-bg: #EDF4FD; --f1-border: #C3DAF3; --f1-label: #175CB0; --f1-val: #0C447C; --f1-fill: #2A72C6;
  --f2-bg: #FDF3E3; --f2-border: #EDD3A6; --f2-label: #B25E09; --f2-val: #8A4906; --f2-fill: #D68420;
  --f3-bg: #E9F6F0; --f3-border: #B7DFCC; --f3-label: #0F7A56; --f3-val: #0A5C41; --f3-fill: #1E9A70;
  --b-gov-bg: #EFEDFD; --b-gov-text: #453BA0;

  /* Elevação (sombras tingidas de navy — preto puro em fundo claro lê como sujeira) */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, .07), 0 2px 4px rgba(16, 24, 40, .04);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, .10), 0 4px 8px rgba(16, 24, 40, .05);
  --shadow-focus: 0 0 0 3px var(--color-accent-ring);
  --overlay: rgba(16, 24, 40, .38);
  --color-progress-track: rgba(16, 24, 40, .12);

  /* Raio, espaçamento, tipografia */
  --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  --fs-2xs: 11px; --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 28px;
  --lh-tight: 1.25; --lh-normal: 1.5; --lh-relaxed: 1.6;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  --border-radius-md: var(--radius-md);
  --border-radius-lg: var(--radius-lg);

  /* Aliases de compatibilidade — remover ao fim da Fase 5, quando nada mais os referenciar */
  --color-status-ok: var(--color-success);
  --color-status-crit: var(--color-danger);
  --color-status-and: var(--color-warning);
  --color-status-info: var(--color-info);
  --b-ok-bg: var(--color-success-bg); --b-ok-text: var(--color-success);
  --b-and-bg: var(--color-warning-bg); --b-and-text: var(--color-warning);
  --b-ini-bg: var(--color-info-bg); --b-ini-text: var(--color-info);
  --b-crit-bg: var(--color-danger-bg); --b-crit-text: var(--color-danger);
  --color-background-primary: var(--color-surface);
  --color-background-secondary: var(--color-surface-sunken);
  --color-surface-elevated: var(--color-surface-raised);
  --color-border-secondary: var(--color-border-strong);
  --color-border-tertiary: var(--color-border-subtle);
}

/* Some navegadores mobile pintam a área clicável de azul por um instante ao tocar (highlight
   padrão do WebKit/Chrome) — como os componentes já têm seu próprio estado de :active/:hover,
   esse flash só atrapalha, sem servir de feedback nenhum. */
html { color-scheme: light; -webkit-tap-highlight-color: transparent; }

[data-theme="dark"] {
  color-scheme: dark;

  --color-page-bg: #0B0E14;
  --color-surface: #151A23;
  --color-surface-raised: #1B212C;
  --color-surface-sunken: #11151C;
  --color-surface-hover: #1F2632;
  --color-border-strong: #333C4B;
  --color-border: #252C38;
  --color-border-subtle: #1D232D;
  --color-text-primary: #E6E9EF;
  --color-text-secondary: #9BA5B4;
  --color-text-tertiary: #7A8494;
  --color-text-danger: #fca5a5;

  --color-accent: #3FB472;
  --color-accent-hover: #58C486;
  --color-accent-active: #2E9A5E;
  --color-accent-soft: #123522;
  --color-accent-ring: rgba(63, 180, 114, .35);
  --color-on-accent: #04140f;
  --gradient-brand: linear-gradient(135deg, #0E3560, #1B4E7E, #12604A);
  --color-portal-banner: var(--gradient-brand);

  --color-success: #3BAFA6;
  --color-success-bg: #0E2F2C;
  --color-success-border: #1B4E48;
  --color-warning: #E0982E;
  --color-warning-bg: #3D2B0A;
  --color-warning-border: #5C3D10;
  --color-danger: #EF4444;
  --color-danger-bg: #3D1414;
  --color-danger-border: #5C1F1F;
  --color-info: #5B9BFF;
  --color-info-bg: #0F2340;
  --color-info-border: #1E3A63;

  --f1-bg: #0f2340; --f1-border: #1e3a63; --f1-label: #5b9bff; --f1-val: #dbeafe; --f1-fill: #3b82f6;
  --f2-bg: #3d2b0a; --f2-border: #5c3d10; --f2-label: #f59e0b; --f2-val: #fef3c7; --f2-fill: #f59e0b;
  --f3-bg: #0d3b30; --f3-border: #15503f; --f3-label: #3BAFA6; --f3-val: #d1fae5; --f3-fill: #3BAFA6;
  --b-gov-bg: #232640; --b-gov-text: #8fa4ff;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .4), 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, .5), 0 2px 4px rgba(0, 0, 0, .3);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, .6), 0 4px 8px rgba(0, 0, 0, .4);
  --overlay: rgba(0, 0, 0, .6);
  --color-progress-track: rgba(255, 255, 255, .14);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  background: var(--color-page-bg);
  color: var(--color-text-primary);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--color-accent-soft); color: var(--color-accent-active); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}