/* FanTR Cooling — Reset leve + tipografia base + classes utilitárias
   Depende de tokens.css (carregado antes por ordem alfabética do Dash).
*/

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-base);
    color: var(--color-text-body);
    background-color: var(--color-bg-page);
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Headings ─────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-heading);
    line-height: var(--line-height-tight);
    margin-top: 0;
    margin-bottom: var(--space-3);
}

/* ── Links ────────────────────────────────────────────────────────────────── */
a {
    color: var(--color-brand-blue);
    text-decoration: none;
    transition: color var(--transition-fast);
}
a:hover {
    color: var(--color-brand-dark);
    text-decoration: underline;
}

/* ── App wrapper ──────────────────────────────────────────────────────────── */
#app-wrapper {
    background-color: var(--color-bg-page);
    min-height: 100vh;
}

/* ── Texto ────────────────────────────────────────────────────────────────── */
.text-brand-blue    { color: var(--color-brand-blue)   !important; }
.text-brand-dark    { color: var(--color-brand-dark)   !important; }
.text-brand-green   { color: var(--color-brand-green)  !important; }
.text-secondary     { color: var(--color-text-secondary) !important; }
.text-disabled      { color: var(--color-text-disabled) !important; }
.text-on-dark       { color: var(--color-text-on-dark) !important; }
.text-success       { color: var(--color-success)      !important; }
.text-warning       { color: var(--color-warning)      !important; }
.text-error         { color: var(--color-error)        !important; }

.text-xs   { font-size: var(--font-size-xs)   !important; }
.text-sm   { font-size: var(--font-size-sm)   !important; }
.text-lg   { font-size: var(--font-size-lg)   !important; }
.text-xl   { font-size: var(--font-size-xl)   !important; }
.text-2xl  { font-size: var(--font-size-2xl)  !important; }

.font-light   { font-weight: var(--font-weight-light)   !important; }
.font-bold    { font-weight: var(--font-weight-bold)    !important; }

/* ── Fundos ───────────────────────────────────────────────────────────────── */
.bg-brand-dark   { background-color: var(--color-brand-dark)  !important; }
.bg-brand-blue   { background-color: var(--color-brand-blue)  !important; }
.bg-brand-light  { background-color: var(--color-brand-light) !important; }
.bg-page         { background-color: var(--color-bg-page)     !important; }
.bg-card         { background-color: var(--color-bg-card)     !important; }

/* ── Sombras ──────────────────────────────────────────────────────────────── */
.shadow-sm  { box-shadow: var(--shadow-sm) !important; }
.shadow-md  { box-shadow: var(--shadow-md) !important; }
.shadow-lg  { box-shadow: var(--shadow-lg) !important; }
.shadow-none { box-shadow: none !important; }

/* ── Bordas ───────────────────────────────────────────────────────────────── */
.border-brand  { border-color: var(--color-border) !important; }
.rounded-sm    { border-radius: var(--radius-sm) !important; }
.rounded-md    { border-radius: var(--radius-md) !important; }
.rounded-lg    { border-radius: var(--radius-lg) !important; }
.rounded-pill  { border-radius: var(--radius-pill) !important; }

/* ── Espaçamento ──────────────────────────────────────────────────────────── */
.gap-1  { gap: var(--space-1) !important; }
.gap-2  { gap: var(--space-2) !important; }
.gap-3  { gap: var(--space-3) !important; }
.gap-4  { gap: var(--space-4) !important; }
.gap-5  { gap: var(--space-5) !important; }

/* ── Separadores ──────────────────────────────────────────────────────────── */
hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--space-4) 0;
}

/* ── Feedback visual genérico (alertas sem Bootstrap) ─────────────────────── */
.alert-success {
    background-color: var(--color-success-bg);
    color: var(--color-success);
    border-left: 3px solid var(--color-success);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
}
.alert-warning {
    background-color: var(--color-warning-bg);
    color: var(--color-warning);
    border-left: 3px solid var(--color-warning);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
}
.alert-error {
    background-color: var(--color-error-bg);
    color: var(--color-error);
    border-left: 3px solid var(--color-error);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
}
.alert-info {
    background-color: var(--color-info-bg);
    color: var(--color-info);
    border-left: 3px solid var(--color-info);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
}