/* =========================================================
   THE FAROL - Variáveis globais de design
   =========================================================
   xs:  até 575px   (celular pequeno)
   sm:  576px+      (celular grande)
   md:  768px+      (tablet)
   lg:  992px+      (notebook / desktop pequeno)
   xl:  1200px+     (desktop)
   xxl: 1400px+     (telas grandes / monitores wide)
   ========================================================= */

:root {
    /* --- Cores da marca --- */
    --color-dark: #424245;
    --color-dark-alt: #454542;
    --color-light: #f7f7f7;
    --color-white: #ffffff;
    --color-accent: #4682b4;
    --color-accent-hover: #3a6d95;
    --color-text: #333333;
    --color-text-muted: #666666;
    --color-text-faint: #999999;
    --color-border: #dddddd;
    --color-border-subtle: #c2c2c2;

    /* --- Cores de status (admin) --- */
    --color-success-bg: #e8f5e9;
    --color-success-text: #2e7d32;
    --color-error-bg: #fdecea;
    --color-error-text: #b71c1c;
    --color-warning: #b8860b;

    /* --- Tipografia --- */
    --font-primary: 'Montserrat', sans-serif;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 800;

    --font-scale: 1; /* controlado via JS, entre 0.85 e 1.3 */

    /* Escala de tamanho de fonte (mobile-first: valores base pequenos,
       crescem em telas maiores via media queries) */
    --font-size-xs: 0.75rem;   /* 12px */
    --font-size-sm: 0.875rem; /* 14px */
    --font-size-base: 1rem;    /* 16px */
    --font-size-md: 1.125rem; /* 18px */
    --font-size-lg: 1.375rem; /* 22px */
    --font-size-xl: 1.75rem;  /* 28px */
    --font-size-xxl: 2.25rem; /* 36px */

    /* --- Espaçamento (escala consistente, em rem) --- */
    --space-xs: 0.25rem;  /* 4px */
    --space-sm: 0.5rem;   /* 8px */
    --space-md: 1rem;     /* 16px */
    --space-lg: 1.5rem;   /* 24px */
    --space-xl: 2rem;     /* 32px */
    --space-xxl: 3rem;    /* 48px */

    /* --- Container / largura máxima de conteúdo --- */
    --container-max-width: 1400px;
    --container-padding: 1rem;

    /* --- Bordas e sombras --- */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.25);

    /* --- Transições --- */
    --transition-fast: 0.15s ease;
    --transition-base: 0.25s ease;
}


/* =========================================================
   SISTEMA DE TEMAS (Light / Dark)
   ========================================================= */

:root,
[data-theme="light"] {
    --surface-primary: var(--color-white);
    --surface-secondary: var(--color-light);
    --surface-inverse: var(--color-dark);

    --text-on-primary: var(--color-dark);
    --text-on-secondary: var(--color-dark);
    --text-on-inverse: var(--color-light);
    --text-muted-theme: var(--color-text-muted);

    --border-theme: var(--color-border);
    --logo-header: url('/images/logos/Logo_Versão_Preta.svg');
}

[data-theme="dark"] {
    --surface-primary: var(--color-dark);
    --surface-secondary: #333336;
    --surface-inverse: var(--color-light);

    --text-on-primary: var(--color-light);
    --text-on-secondary: var(--color-light);
    --text-on-inverse: var(--color-dark);
    --text-muted-theme: #b5b5b8;

    --border-theme: #555558;
    --logo-header: url('/images/logos/Logo_Versão_Branca.svg');
}

/* =========================================================
   ESCALA DE FONTE AJUSTÁVEL PELO USUÁRIO
   =========================================================
   Aplicar a classe .font-scalable em qualquer elemento cujo
   font-size deva respeitar o ajuste de acessibilidade do leitor.
   O elemento também precisa de uma classe de tamanho base
   (.font-scalable--sm, --base, --md, --lg, --xl, --xxl) para
   saber a partir de qual tamanho escalar.
   ========================================================= */

.font-scalable--xs { font-size: calc(var(--font-size-xs) * var(--font-scale)) !important; }
.font-scalable--sm { font-size: calc(var(--font-size-sm) * var(--font-scale)) !important; }
.font-scalable--base { font-size: calc(var(--font-size-base) * var(--font-scale)) !important; }
.font-scalable--md { font-size: calc(var(--font-size-md) * var(--font-scale)) !important; }
.font-scalable--lg { font-size: calc(var(--font-size-lg) * var(--font-scale)) !important; }
.font-scalable--xl { font-size: calc(var(--font-size-xl) * var(--font-scale)) !important; }
.font-scalable--xxl { font-size: calc(var(--font-size-xxl) * var(--font-scale)) !important; }