/* =====================================================================
   EDUSTAT Municipal — Design tokens
   Linguagem visual de um portal de informação estatística: fundos neutros, uma única cor de marca por nível
   territorial (vinda do Backoffice, ver TerritoryTheme.BuildStyle), texto em cinzento-escuro e cores semânticas
   reservadas às variações. Os componentes usam apenas estes tokens.
   ===================================================================== */

:root {
  /* ---------- Tipografia ----------
     Inter em todo o site (texto, interface, títulos e números com algarismos tabulares), carregada do Google Fonts
     nas layouts (_EmHead). */
  --em-font-sans: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --em-font-display: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

  --em-fs-display: 48px;     /* título hero da homepage */
  --em-fs-entity: 42px;      /* nome do território: "Braga", "Cávado" */
  --em-fs-page-title: 32px;  /* título de secção-página: "Rankings", "Relatórios" */
  --em-fs-kpi-xl: 44px;      /* KPI destacado (card com sparkline), IMEQ */
  --em-fs-kpi-lg: 30px;      /* valor de indicador */
  --em-fs-kpi-md: 24px;      /* valores de contexto, rácio */
  --em-fs-h3: 20px;
  --em-fs-h4: 17px;
  --em-fs-card-title: 15px;  /* título de card/gráfico */
  --em-fs-body-lg: 16px;
  --em-fs-body: 14px;
  --em-fs-label: 13px;
  --em-fs-caption: 12px;
  --em-fs-micro: 12px; /* mínimo legível em telemóvel (relatório de qualidade B3) */

  --em-fw-regular: 400;
  --em-fw-medium: 500;
  --em-fw-semibold: 600;
  --em-fw-bold: 700;
  --em-fw-heavy: 800;

  --em-lh-tight: 1.1;
  --em-lh-heading: 1.25;
  --em-lh-body: 1.55;
  --em-ls-eyebrow: 0.08em;   /* rótulos em maiúsculas (eyebrow, cabeçalhos de tabela) */

  /* ---------- Espaçamento (base 4px) ---------- */
  --em-space-1: 4px;
  --em-space-2: 8px;
  --em-space-3: 12px;
  --em-space-4: 16px;
  --em-space-5: 20px;
  --em-space-6: 24px;
  --em-space-8: 32px;
  --em-space-10: 40px;
  --em-space-12: 48px;
  --em-space-16: 64px;

  /* ---------- Dimensões de layout ---------- */
  --em-header-height: 64px;
  --em-control-height: 40px;
  --em-table-row-height: 44px;
  --em-content-padding: 40px;
  --em-content-max: 1280px;
  --em-grid-gap: 20px;
  --em-card-padding: 24px;
  --em-form-max-width: 560px;

  /* ---------- Raios ---------- */
  --em-radius-sm: 4px;
  --em-radius-md: 8px;
  --em-radius-lg: 12px;
  --em-radius-xl: 16px;
  --em-radius-full: 999px;

  /* ---------- Bordas, sombras e movimento ---------- */
  --em-border-width: 1px;
  --em-shadow-card: none;
  --em-shadow-raised: 0 12px 32px -12px rgba(18, 33, 47, 0.28);   /* pesquisa do hero, menus flutuantes */
  --em-shadow-active-nav: none;
  --em-shadow-pop: 0 1px 2px rgba(18, 33, 47, 0.08);               /* separador ativo do controlo segmentado */
  --em-focus-ring: 0 0 0 3px color-mix(in srgb, var(--em-theme-primary) 28%, transparent);
  --em-transition: 160ms ease;

  /* ---------- Neutros ---------- */
  --em-color-surface: #FFFFFF;
  --em-color-surface-header: #FFFFFF;
  --em-color-bg-main: #F5F6F7;
  --em-color-bg-sidebar: #FFFFFF;
  --em-color-bg-subtle: #F4F5F7;      /* cabeçalho de tabela, hover */
  --em-color-bg-muted: #ECEFF2;       /* trilho do controlo segmentado */
  --em-color-bg-tint: #F7F8F9;
  --em-color-border: #E1E5EA;
  --em-color-border-strong: #CBD2D9;  /* controlos de formulário */
  --em-chip-bg: #FFFFFF;
  --em-chip-border: #CBD2D9;
  --em-btn-outline-border: #CBD2D9;
  --em-color-divider: #ECEFF2;

  --em-color-text-strong: #14202B;
  --em-color-text: #34414E;
  --em-color-text-muted: #5E6A77;     /* ≥ 4.5:1 sobre branco */
  --em-color-text-subtle: #8792A0;
  --em-color-text-inverse: #FFFFFF;

  /* ---------- Semânticas ---------- */
  --em-color-positive: #187A4C;
  --em-color-negative: #B8322A;
  --em-color-neutral: #5E6A77;
  --em-color-warning: #B26B00;
  --em-color-danger: #B8322A;
  --em-color-info: #2B5F9E;
  --em-color-success: #187A4C;
  --em-color-info-bg: #EEF3F9;
  --em-color-positive-bg: #EBF5EF;
  --em-color-negative-bg: #FBEEEC;
  --em-color-warning-bg: #FBF3E6;

  /* Escala dos índices EDUSTAT (EscalaIndice): extremos e meio da escala contínua verde–amarelo–vermelho (gauges,
     barras dos Rankings e legenda). */
  --em-indice-bom: #2E9D5B;
  --em-indice-medio: #E2A41C;
  --em-indice-fraco: #D2453A;
  --em-color-highlight-row: color-mix(in srgb, var(--em-theme-primary) 9%, #FFFFFF);

  /* ---------- Dados / gráficos ----------
     A série do território segue a cor do nível (redefinida no <body> por TerritoryTheme.BuildStyle); a
     referência (Portugal/Continente) é sempre um cinzento neutro, para o território ficar em primeiro plano. */
  --em-chart-series-1: #0B5D4B;
  --em-chart-series-2: #9AA4AF;
  --em-chart-bar: #0B5D4B;
  --em-chart-bar-alt: #6FA898;
  --em-chart-track: #E6EAEE;
  --em-chart-grid: #ECEFF2;
  --em-chart-donut-1: #0B5D4B;
  --em-chart-donut-2: #9CC7BB;
  --em-chart-scatter: #9CC7BB;
  --em-chart-scatter-highlight: #D9692B;
  --em-rank-bar: #0B5D4B;

  /* Legenda do Mapa educativo */
  --em-map-public: #1B7F5A;
  --em-map-private: #D98A0B;
  --em-map-cluster: #E5A823;
  --em-map-vocational: #3A9BC1;
  --em-map-arts: #7A4BB0;
  --em-map-pin: #1E4E9C;

  /* ---------- Tema por defeito (sobreposto no <body> com as cores do Backoffice) ---------- */
  --em-theme-primary: #0B5D4B;
  --em-theme-primary-dark: #08463A;
  --em-theme-accent: #2E8A6F;
  --em-theme-active-icon: #0B5D4B;
  --em-theme-heading: var(--em-color-text-strong);
  --em-theme-section-title: var(--em-color-text-strong);
  --em-theme-bg-main: var(--em-color-bg-main);
  --em-theme-bg-sidebar: var(--em-color-bg-sidebar);
  --em-theme-hero-bg: #08463A;
  --em-theme-map-fill: #A9C9BF;
  --em-theme-link: #0B5D4B;
  --em-theme-pagination-active: #0B5D4B;
  --em-theme-checkbox: #0B5D4B;
  --em-theme-search-button: #0B5D4B;
}

/* ---------- Referência do mockup para CIM e CCDR (em produção vêm do Backoffice) ---------- */
.em-theme-cim {
  --em-theme-primary: #A8175C;
  --em-theme-primary-dark: #7A103F;
  --em-theme-search-button: #A8175C;
  --em-theme-accent: #B4465F;
  --em-theme-map-fill: #DEA5B6;
  --em-theme-gauge-a: #0B858B;
  --em-theme-gauge-b: #D82363;
  --em-theme-gauge-track: #E7D3DA;
  --em-choropleth-1: #158C6B;
  --em-choropleth-2: #ACDBBB;
  --em-choropleth-3: #FAE3AA;
  --em-choropleth-4: #FA5A84;
  --em-value-pill-high: #B2E6D4;
  --em-value-pill-mid: #FBF3D3;
  --em-value-pill-low: #FADCD3;
}

.em-theme-ccdr {
  --em-theme-primary: #0B836B;
  --em-theme-primary-dark: #0A6A60;
  --em-theme-accent: #147B65;
  --em-theme-search-button: #036983;
  --em-theme-map-fill: #A1BEC5;
  --em-choropleth-1: #127A7C;
  --em-choropleth-2: #8DCCB4;
  --em-choropleth-3: #B4D4B3;
  --em-choropleth-4: #E99B44;
}