/* ==========================================================================
   Sale Marketing — Design Tokens & Base
   Fundação visual do sistema: cores, tipografia, espaçamento, sombras,
   bordas e transições. Também re-tema os componentes do Bootstrap 5
   (via CSS custom properties) para a identidade Salesiana (azul/vermelho).
   ========================================================================== */

:root {
    /* ---- Cor de marca — Azul ---- */
    --color-primary-900: #0a1930;
    --color-primary-800: #0d2244;
    --color-primary-700: #142c52;
    --color-primary-600: #1a3a6b;
    --color-primary-500: #23498a;
    --color-primary-400: #3a5da3;
    --color-primary-100: #dbe4f3;
    --color-primary-50:  #eff3fa;

    /* ---- Cor de marca — Vermelho ---- */
    --color-accent-700: #8f291c;
    --color-accent-600: #a5311f;
    --color-accent-500: #c0392b;
    --color-accent-400: #d24c3e;
    --color-accent-100: #f8dcd8;
    --color-accent-50:  #fdf1f0;

    /* ---- Neutros ---- */
    --color-ink-900: #0f172a;
    --color-ink-700: #33415c;
    --color-ink-500: #64748b;
    --color-ink-400: #94a3b8;
    --color-ink-300: #cbd5e1;
    --color-ink-200: #e2e8f0;
    --color-ink-100: #eef1f6;

    --color-surface: #ffffff;
    --color-bg: #f4f6fb;
    --color-border: #e3e8f1;

    /* Aliases retrocompatíveis (usados em estilos inline já existentes) */
    --azul-escuro: var(--color-primary-600);
    --azul-profundo: var(--color-primary-800);
    --vermelho: var(--color-accent-500);

    /* ---- Tipografia ---- */
    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --fs-xs: 0.75rem;
    --fs-sm: 0.8125rem;
    --fs-base: 0.9375rem;
    --fs-md: 1.0625rem;
    --fs-lg: 1.25rem;
    --fs-xl: 1.5rem;
    --fs-2xl: 1.875rem;

    /* ---- Espaçamento ---- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-8: 3rem;

    /* ---- Raio de borda ---- */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-full: 999px;

    /* ---- Sombras ---- */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.12);
    --shadow-focus: 0 0 0 4px rgba(26, 58, 107, 0.15);

    /* ---- Transições ---- */
    --transition-fast: 120ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 320ms ease;

    /* ---- Re-tema Bootstrap (root-level, afeta bg-*/text-*/border-* utilities) ---- */
    --bs-primary: var(--color-primary-600);
    --bs-primary-rgb: 26, 58, 107;
    --bs-danger: var(--color-accent-500);
    --bs-danger-rgb: 192, 57, 43;
    --bs-body-color: var(--color-ink-900);
    --bs-body-bg: var(--color-bg);
    --bs-border-color: var(--color-border);
    --bs-link-color: var(--color-primary-600);
    --bs-link-hover-color: var(--color-primary-800);
    --bs-body-font-family: var(--font-sans);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    color: var(--color-ink-900);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans);
    color: var(--color-ink-900);
    letter-spacing: -0.01em;
}

a {
    color: var(--color-primary-600);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-primary-800);
}

::selection {
    background: var(--color-primary-100);
    color: var(--color-primary-800);
}

/* Scrollbar discreta (WebKit) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--color-ink-300);
    border-radius: var(--radius-full);
    border: 2px solid var(--color-bg);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-ink-400);
}

/* Foco acessível consistente */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
}

/* ---- Utilitários de texto/marca ---- */
.text-brand {
    color: var(--color-primary-600) !important;
}

.text-accent {
    color: var(--color-accent-500) !important;
}

.fw-semibold {
    font-weight: 600;
}

.text-muted {
    color: var(--color-ink-500) !important;
}