/* Aroeira Labs Design System — Color tokens
   Source of truth: hub-tokens.css v1.0 (Agosto 2026) — HUB Municipal.
   Canonical brand = Petróleo #005F73 (--al-petrol-700), used as --primary
   in BOTH data-theme="gestao" and data-theme="cidadao". Per-prefeitura
   customization overrides --brand-main/-dark/-mid/-light via
   [data-prefeitura="slug"] — see bottom of file. */

:root {
  /* 1. Primitivos — não consumir diretamente nos componentes */
  --al-petrol-900: #00475a;
  --al-petrol-700: #005f73; /* canônico */
  --al-petrol-500: #1b6f7e;
  --al-petrol-300: #5ba3b2;
  --al-petrol-50: #e6f4f7;

  --al-aroeira-700: #2d5443;
  --al-aroeira-500: #3a6b56;
  --al-aroeira-300: #6b9f87;
  --al-aroeira-50: #eaf2ee;

  --al-ink-900: #0d0f1a;
  --al-ink-700: #1a2332;
  --al-gray-600: #4b5563;
  --al-gray-400: #9aa0b8;
  --al-gray-200: #e4e7f0;
  --al-gray-150: #cdd2e3;
  --al-gray-100: #eef0f6;
  --al-gray-50: #f7f8fc;
  --al-white: #ffffff;

  --al-green-700: #065f46; --al-green-500: #10b981; --al-green-50: #ecfdf5;
  --al-amber-700: #92400e; --al-amber-500: #f59e0b; --al-amber-50: #fffbeb;
  --al-red-700: #991b1b;   --al-red-500: #ef4444;   --al-red-50: #fef2f2;
  --al-blue-700: #1e40af;  --al-blue-500: #3b82f6;  --al-blue-50: #eff6ff;
  --al-destructive: #ef4444;

  /* 2. Tokens semânticos base — o que os componentes DEVEM consumir */
  --brand-main: var(--al-petrol-700);
  --brand-dark: var(--al-petrol-900);
  --brand-mid: var(--al-petrol-500);
  --brand-light: var(--al-petrol-50);

  --accent-main: var(--al-aroeira-500);
  --accent-dark: var(--al-aroeira-700);
  --accent-light: var(--al-aroeira-50);

  --focus-ring: 0 0 0 2px var(--al-white), 0 0 0 4px var(--brand-main);

  --background: var(--al-white);
  --foreground: var(--al-ink-900);

  --card: var(--al-white);
  --card-foreground: var(--al-ink-900);

  --popover: var(--al-white);
  --popover-foreground: var(--al-ink-900);

  --primary: var(--brand-main);
  --primary-hover: var(--brand-dark);
  --primary-foreground: var(--al-white);

  --secondary: var(--al-gray-100);
  --secondary-foreground: var(--al-ink-900);

  --muted: var(--al-gray-100);
  --muted-foreground: var(--al-gray-400);

  --accent: var(--brand-light);
  --accent-foreground: var(--brand-main);

  --destructive: var(--al-destructive);
  --destructive-foreground: var(--al-white);

  --border: var(--al-gray-200);
  --input-background: var(--al-gray-100);
  --switch-background: var(--al-gray-150);
  --ring: var(--brand-main);

  --status-info: var(--al-blue-500);
  --status-success: var(--al-green-500);
  --status-warning: var(--al-amber-500);
  --status-error: var(--al-red-500);
  --status-progress: var(--accent-main);

  /* Ação — nomenclatura hub (consumida por botões/links via var() adicional) */
  --action-primary-bg: var(--brand-main);
  --action-primary-hover: var(--brand-dark);
  --action-primary-text: var(--al-white);
  --action-secondary-border: var(--brand-main);
  --action-secondary-text: var(--brand-main);
  --action-soft-bg: var(--brand-light);
  --action-soft-text: var(--brand-main);
  --action-confirm-bg: var(--accent-main);
  --action-confirm-hover: var(--accent-dark);
  --action-confirm-text: var(--al-white);
}

/* 3. Tema Gestão — servidor público, desktop-first, denso (explícito; mesmos
   valores do :root acima, escopados para reforçar a separação por tema). */
[data-theme="gestao"] {
  --bg-canvas: var(--al-gray-50);
  --bg-sidebar: var(--al-white);
  --bg-header: var(--brand-main);
  --primary: var(--brand-main);
  --primary-hover: var(--brand-dark);
}

/* Legado: violeta antigo mantido só como referência/histórico, não consumido
   por componentes. Use --al-violet-600 se precisar recriar telas antigas. */
:root { --al-violet-600: #5030e5; --al-violet-700: #4326c2; }

/* "DigaAí Gestor" — product-level sub-brand tokens (Petróleo Ágilis + Verde
   Aroeira) for the Ouvidoria admin app, kept separate from the core
   --primary (violet) tokens above, same pattern as --pds-* below.
   Source: uploads/digaai-admin-v2.html. */
:root {
  --digaai-petrol: #1b6f7e;
  --digaai-petrol-dk: #145766;
  --digaai-petrol-light: #e8f5f7;
  --digaai-petrol-mid: #2590a5;
  --digaai-aroeira: #3a6b56;
  --digaai-aroeira-light: #eaf1ec;
  --digaai-aroeira-dk: #2a4f3e;
  --digaai-text: #1a2332;
  --digaai-text2: #4b5a6b;
  --digaai-text3: #94a3b8;
  --digaai-border: #e2e8f0;
  --digaai-border2: #cbd5e1;
  --digaai-bg: #f5f7fa;
  --digaai-bg2: #eef0f6;
}

/* "Painel das Secretarias" — product-level sub-brand tokens (blue),
   introduced for the standard screen-shell/login pattern requested by the
   user. Intentionally kept separate from the core --primary (violet)
   tokens above rather than overwriting them system-wide — see
   templates/login/README for the rationale; flag if this should instead
   replace the core brand color everywhere. */
:root {
  --pds-primary: #0066a1;
  --pds-primary-hover: #005489;
  --pds-decorative: #024a95;
  --pds-decorative-green: #05966930;
  --pds-title: #101828;
  --pds-body: #4a5565;
  --pds-label: #364153;
  --pds-placeholder: #99a1af;
  --pds-border: #d0d4db;
}

/* ── Tema Cidadão — Aroeira Cidadão ────────────────────────────────────
   Reaproveita os MESMOS nomes semânticos do tema Gestão acima (--primary,
   --background, --border, --status-*, etc.) — os componentes de
   components/ não mudam, só o valor sob [data-theme="cidadao"].

   Escalabilidade entre prefeituras: cada cliente sobrescreve só
   --brand-main/--brand-dark/--brand-mid/--brand-light (cor institucional
   do brasão) via [data-prefeitura="slug"] — tudo o resto do tema (Verde
   Aroeira, cinzas, cores semânticas) é FIXO, identidade Aroeira, não do
   cliente. --tenant-brand* mantido como alias legado. Ver design_system.md §3. */
[data-theme="cidadao"] {
  --bg-canvas: var(--al-gray-50);
  --bg-header: var(--brand-main);

  /* Alias legado (compat com componentes/cards existentes) */
  --tenant-brand: var(--brand-main);
  --tenant-brand-hover: var(--brand-dark);
  --tenant-brand-subtle: var(--brand-light);
  --tenant-brand-mid: var(--brand-mid);

  --cidadao-aroeira: var(--accent-main);
  --cidadao-aroeira-hover: var(--accent-dark);
  --cidadao-aroeira-subtle: var(--accent-light);

  --background: #ffffff;
  --foreground: var(--al-ink-900);
  --card: #ffffff;
  --card-foreground: var(--al-ink-900);
  --popover: #ffffff;
  --popover-foreground: var(--al-ink-900);

  --primary: var(--brand-main);
  --primary-hover: var(--brand-dark);
  --primary-foreground: #ffffff;

  --secondary: #f1f5f9;
  --secondary-foreground: var(--al-ink-900);
  --muted: var(--al-gray-100);
  --muted-foreground: var(--al-gray-400);
  --accent: var(--brand-light);
  --accent-foreground: var(--brand-main);

  --destructive: #ef4444;
  --destructive-foreground: #ffffff;
  --border: var(--al-gray-200);
  --input-background: var(--al-gray-50);
  --switch-background: var(--al-gray-150);
  --ring: var(--brand-main);

  --status-info: var(--al-blue-500);
  --status-info-subtle: var(--al-blue-50);
  --status-success: var(--al-green-500);
  --status-success-subtle: var(--al-green-50);
  --status-warning: var(--al-amber-500);
  --status-warning-subtle: var(--al-amber-50);
  --status-error: var(--al-red-500);
  --status-error-subtle: var(--al-red-50);
  --status-progress: var(--accent-main);

  /* Mais leve: raio maior, alvos de toque maiores (ver spacing.css) */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-full: 999px;
}

/* 5. Overrides por prefeitura — só 4 variáveis mudam; botões, headers,
   links, badges e anéis de foco (ambos os temas) atualizam automaticamente
   porque --primary/--ring/--accent* derivam de --brand-*.
   Aplicar via [data-prefeitura="slug"] no <html>, junto de data-theme. */
[data-prefeitura="sobral"] {
  --brand-main: #1d4ed8;
  --brand-dark: #1e3a8a;
  --brand-mid: #3b82f6;
  --brand-light: #eff6ff;
}
[data-prefeitura="fortaleza"] {
  --brand-main: #b91c1c;
  --brand-dark: #7f1d1d;
  --brand-mid: #ef4444;
  --brand-light: #fef2f2;
}
/* Adicione novos clientes aqui seguindo o mesmo padrão de 4 variáveis. */