/* ==========================================================================
   veiculOS — Design tokens (cores oficiais do MAGU Design System v1)
   Superfícies de vidro, escala tipográfica, espaçamento e raios contidos.
   ========================================================================== */
:root {
  color-scheme: light;

  /* Cores oficiais do MAGU Design System v1 (design-system/css/tokens.css do magu.ia.br).
     Claro = tema "light" da MAGU; escuro = padrão da MAGU. Trocar só aqui. */
  --bg: #eceae6;
  --bg-glow: #e4e2dd;
  --surface: rgba(246, 244, 240, .74);
  --surface-strong: rgba(250, 249, 246, .92);
  --surface-solid: #f6f4f0;
  --surface-2: rgba(246, 244, 240, .55);
  --surface-inset: rgba(43, 43, 46, .05);

  /* Texto e linhas */
  --text: #2b2b2e;
  --muted: rgba(43, 43, 46, .74);
  --line: rgba(255, 255, 255, .82);
  --line-strong: rgba(0, 0, 0, .11);

  /* Núcleo azul: única cor de ação */
  --brand-core: #0a6fd1;
  --brand-core-light: #3d8fe0;
  --primary: #0a6fd1;
  --primary-dark: #0858a8;
  --primary-soft: rgba(10, 111, 209, .10);
  --on-primary: #ffffff;
  --accent: var(--primary);
  --danger: #c0271d;
  --warning: #9a5d05;
  --info: var(--primary);

  /* Estados: verde = sucesso, âmbar = atenção, vermelho = vencido */
  --status-ok: #17834f;
  --status-ok-soft: rgba(23, 131, 79, .12);
  --status-due: #9a5d05;
  --status-due-soft: rgba(154, 93, 5, .13);
  --status-overdue: #c0271d;
  --status-overdue-soft: rgba(192, 39, 29, .11);
  --status-neutral: #5f5e5c;
  --status-neutral-soft: rgba(43, 43, 46, .08);
  --status-due-strong: #d98a0b;
  --status-overdue-strong: #e0453a;
  --backdrop: rgba(11, 12, 17, .45);

  /* Sombras */
  --shadow: 0 1px 1px rgba(40, 30, 20, .06), 0 12px 36px -10px rgba(40, 30, 20, .22);
  --shadow-raised: 0 26px 64px rgba(40, 30, 20, .2), inset 0 1px 0 rgba(255, 255, 255, .9);
  --shadow-soft: 0 4px 14px rgba(40, 30, 20, .07);
  --shadow-nav: 0 -8px 26px rgba(40, 30, 20, .09);
  --glass-blur: 26px;

  /* Raios: MAGU usa 15px em quase tudo (aninhado 10px) */
  --radius-sm: 10px;
  --radius: 15px;
  --radius-md: 15px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* Espaçamento */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* Tipografia: SF Pro nos Apple; Inter nos demais (como no site) */
  --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Helvetica Neue", system-ui, sans-serif;
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-lg: 17px;
  --text-xl: 21px;
  --text-2xl: 27px;
  --text-hero: clamp(30px, 8vw, 40px);

  /* Layout */
  --topbar-height: 64px;
  --nav-height: 68px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  font-family: var(--font-system);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0c11;
  --bg-glow: #10131c;
  --surface: rgba(30, 32, 42, .72);
  --surface-strong: rgba(22, 24, 32, .9);
  --surface-solid: #16181f;
  --surface-2: rgba(36, 38, 50, .7);
  --surface-inset: rgba(255, 255, 255, .06);
  --text: #e4e4e9;
  --muted: rgba(228, 228, 236, .64);
  --line: rgba(255, 255, 255, .10);
  --line-strong: rgba(255, 255, 255, .14);
  --brand-core: #2ea8ff;
  --brand-core-light: #6fc3ff;
  --primary: #2ea8ff;
  --primary-dark: #6fc3ff;
  --primary-soft: rgba(46, 168, 255, .16);
  --on-primary: #ffffff;
  --accent: var(--primary);
  --danger: #ff6b6b;
  --warning: #ffc15a;
  --info: var(--primary);
  --status-ok: #3fd68a;
  --status-ok-soft: rgba(63, 214, 138, .14);
  --status-due: #ffc15a;
  --status-due-soft: rgba(255, 193, 90, .15);
  --status-overdue: #ff6b6b;
  --status-overdue-soft: rgba(255, 107, 107, .15);
  --status-neutral: rgba(228, 228, 236, .62);
  --status-neutral-soft: rgba(255, 255, 255, .08);
  --shadow: 0 1px 1px rgba(0, 0, 0, .25), 0 12px 40px -8px rgba(0, 0, 0, .55);
  --shadow-raised: 0 26px 64px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .1);
  --shadow-soft: 0 4px 14px rgba(0, 0, 0, .28);
  --shadow-nav: 0 -8px 26px rgba(0, 0, 0, .4);
}

@media (prefers-reduced-transparency: reduce) {
  :root,
  [data-theme="dark"] {
    --surface: var(--surface-solid);
    --surface-strong: var(--surface-solid);
    --surface-2: var(--surface-solid);
    --glass-blur: 0px;
  }
}