/* ==========================================================================
   Ágora Design System — tokens
   Extraídos de https://www.gov.pt (Ágora DS, AMA). Mapeados para Bootstrap 5.3.
   Não editar valores: alterar aqui quebra a conformidade com o DS do Estado.
   ========================================================================== */

:root {
    /* --- Base -------------------------------------------------------------- */
    --color-transparent: transparent;
    --color-white: #FFFFFF;
    --color-black: #000000;
    --color-focus: #F408FC;
    --color-backdrop: rgba(43, 54, 60, .96);
    --color-mask-image: rgba(43, 54, 60, .8);
    --color-mask-neutral-900: #2B363CCC;
    --color-mask-primary-900: #021C51CC;
    --color-mask-secondary-900: #0D4C75CC;

    /* --- Neutral ----------------------------------------------------------- */
    --color-neutral-50: #F7F8FA;
    --color-neutral-100: #F1F3F8;
    --color-neutral-200: #E1E4EA;
    --color-neutral-300: #CDD2DC;
    --color-neutral-400: #BAC0CC;
    --color-neutral-500: #9CA6B8;
    --color-neutral-600: #8893AA;
    --color-neutral-700: #64718B;
    --color-neutral-800: #475164;
    --color-neutral-900: #2B363C;

    /* --- Primary (azul institucional) -------------------------------------- */
    --color-primary-50: #FAFCFF;
    --color-primary-100: #F2F6FF;
    --color-primary-200: #E5EEFF;
    --color-primary-300: #BBD1FD;
    --color-primary-400: #5F93FC;
    --color-primary-500: #1A65FA;
    --color-primary-600: #034AD8;
    --color-primary-700: #0338A2;
    --color-primary-800: #002B82;
    --color-primary-900: #021C51;

    /* --- Secondary (azul claro) -------------------------------------------- */
    --color-secondary-50: #F5FBFF;
    --color-secondary-100: #EBF6FF;
    --color-secondary-200: #E3F4FF;
    --color-secondary-300: #CCEAFF;
    --color-secondary-400: #A0D8FE;
    --color-secondary-500: #1CA3FC;
    --color-secondary-600: #1993E3;
    --color-secondary-700: #1682CA;
    --color-secondary-800: #12669E;
    --color-secondary-900: #0D4C75;

    /* --- Informative -------------------------------------------------------- */
    --color-informative-50: #E5F6FF;
    --color-informative-100: #E5F6FF;
    --color-informative-200: #A5DEFF;
    --color-informative-300: #77CEFF;
    --color-informative-400: #49BCFF;
    --color-informative-500: #0079BF;
    --color-informative-600: #00598C;
    --color-informative-700: #0B486B;
    --color-informative-800: #083752;
    --color-informative-900: #00121C;

    /* --- Success ------------------------------------------------------------ */
    --color-success-50: #E5FFF6;
    --color-success-100: #C2F2E2;
    --color-success-200: #7ACCB1;
    --color-success-300: #36B289;
    --color-success-400: #1F9970;
    --color-success-500: #008558;
    --color-success-600: #00724C;
    --color-success-700: #005539;
    --color-success-800: #013926;
    --color-success-900: #001C13;

    /* --- Warning ------------------------------------------------------------ */
    --color-warning-50: #FFF9E5;
    --color-warning-100: #FFF2CC;
    --color-warning-200: #FFE699;
    --color-warning-300: #FFE699;
    --color-warning-400: #FFD966;
    --color-warning-500: #FBCB3C;
    --color-warning-600: #FBBB3C;
    --color-warning-700: #F2A222;
    --color-warning-800: #B06112;
    --color-warning-900: #80460D;

    /* --- Danger ------------------------------------------------------------- */
    --color-danger-50: #FEF1F2;
    --color-danger-100: #FEE1E3;
    --color-danger-200: #FEC8CC;
    --color-danger-300: #FCA6AD;
    --color-danger-400: #F8727D;
    --color-danger-500: #DE2D3B;
    --color-danger-600: #D12332;
    --color-danger-700: #C41826;
    --color-danger-800: #B20917;
    --color-danger-900: #86131D;
}

/* ==========================================================================
   Ponte para Bootstrap 5.3
   As utilities do Bootstrap (.text-primary, .bg-primary, .btn-primary) leem
   as variáveis --bs-*. Redefinimo-las aqui para herdarem os tokens Ágora.
   ========================================================================== */

:root,
[data-bs-theme="light"] {
    /* Tipografia — gov.pt usa Noto Sans, 16px base */
    --bs-font-sans-serif: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 1rem;
    --bs-body-line-height: 1.5;
    --bs-body-color: var(--color-neutral-900);
    --bs-body-color-rgb: 43, 54, 60;
    --bs-body-bg: var(--color-white);
    --bs-body-bg-rgb: 255, 255, 255;

    /* Cores de tema */
    --bs-primary: var(--color-primary-600);
    --bs-primary-rgb: 3, 74, 216;
    --bs-secondary: var(--color-secondary-700);
    --bs-secondary-rgb: 22, 130, 202;
    --bs-success: var(--color-success-500);
    --bs-success-rgb: 0, 133, 88;
    --bs-info: var(--color-informative-500);
    --bs-info-rgb: 0, 121, 191;
    --bs-warning: var(--color-warning-700);
    --bs-warning-rgb: 242, 162, 34;
    --bs-danger: var(--color-danger-500);
    --bs-danger-rgb: 222, 45, 59;
    --bs-light: var(--color-neutral-100);
    --bs-light-rgb: 241, 243, 248;
    --bs-dark: var(--color-neutral-900);
    --bs-dark-rgb: 43, 54, 60;

    /* Subtle / border — usados por alerts, badges e cards do BS 5.3 */
    --bs-primary-bg-subtle: var(--color-primary-100);
    --bs-primary-border-subtle: var(--color-primary-300);
    --bs-primary-text-emphasis: var(--color-primary-800);
    --bs-secondary-bg-subtle: var(--color-secondary-100);
    --bs-secondary-border-subtle: var(--color-secondary-300);
    --bs-secondary-text-emphasis: var(--color-secondary-800);
    --bs-success-bg-subtle: var(--color-success-50);
    --bs-success-border-subtle: var(--color-success-200);
    --bs-success-text-emphasis: var(--color-success-700);
    --bs-warning-bg-subtle: var(--color-warning-100);
    --bs-warning-border-subtle: var(--color-warning-300);
    --bs-warning-text-emphasis: var(--color-warning-900);
    --bs-danger-bg-subtle: var(--color-danger-100);
    --bs-danger-border-subtle: var(--color-danger-200);
    --bs-danger-text-emphasis: var(--color-danger-800);
    --bs-info-bg-subtle: var(--color-informative-100);
    --bs-info-border-subtle: var(--color-informative-200);
    --bs-info-text-emphasis: var(--color-informative-700);

    /* Superfícies e bordas */
    --bs-secondary-bg: var(--color-neutral-100);
    --bs-secondary-bg-rgb: 241, 243, 248;
    --bs-tertiary-bg: var(--color-neutral-50);
    --bs-tertiary-bg-rgb: 247, 248, 250;
    --bs-secondary-color: var(--color-neutral-700);
    --bs-tertiary-color: var(--color-neutral-600);
    --bs-border-color: var(--color-neutral-300);
    --bs-border-color-translucent: var(--color-neutral-200);

    /* Links — #034AD8 sobre branco = 7.06:1 (WCAG AAA) */
    --bs-link-color: var(--color-primary-600);
    --bs-link-color-rgb: 3, 74, 216;
    --bs-link-hover-color: var(--color-primary-800);
    --bs-link-hover-color-rgb: 0, 43, 130;

    /* Raios */
    --bs-border-radius: .5rem;
    --bs-border-radius-sm: .25rem;
    --bs-border-radius-lg: .75rem;
    --bs-border-radius-xl: 1rem;

    /* Foco — o Ágora usa magenta de alto contraste, não o azul do Bootstrap */
    --bs-focus-ring-color: var(--color-focus);
    --bs-focus-ring-width: 3px;
    --bs-focus-ring-opacity: 1;
}

/* ==========================================================================
   Acessibilidade — obrigatória em sites da Administração Pública
   (DL 83/2018, WCAG 2.1 AA). O anel de foco do Ágora é sempre visível.
   ========================================================================== */

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: var(--bs-focus-ring-width) solid var(--color-focus);
    outline-offset: 2px;
    box-shadow: none;
}

/* ==========================================================================
   Escala tipográfica (gov.pt: h1 40px/60px 700)
   ========================================================================== */

h1, .h1 { font-size: 2.5rem; line-height: 1.5; font-weight: 700; }
h2, .h2 { font-size: 2rem;   line-height: 1.5; font-weight: 700; }
h3, .h3 { font-size: 1.5rem; line-height: 1.5; font-weight: 700; }
h4, .h4 { font-size: 1.25rem; line-height: 1.5; font-weight: 600; }
h5, .h5 { font-size: 1.125rem; line-height: 1.5; font-weight: 600; }
h6, .h6 { font-size: 1rem;  line-height: 1.5; font-weight: 600; }

@media (max-width: 767.98px) {
    h1, .h1 { font-size: 2rem; }
    h2, .h2 { font-size: 1.5rem; }
    h3, .h3 { font-size: 1.25rem; }
}