/* =========================================================
   FINEXA DESIGN SYSTEM — Tokens & Base Styles
   ========================================================= */

:root {
    /* Cores base */
    --bg: #f6f4ee;
    --surface: #ffffff;
    --ink: #0e1116;
    --ink-soft: #5b6270;
    --muted: #9aa0aa;
    --line: #ececec;
    --line-dashed: #d8d6cf;

    /* Paleta de marca */
    --lilac: #c8c4ff;
    --lilac-2: #b9b4ff;
    --lilac-deep: #5b53d6;
    --lilac-soft: #eceaff;
    --mint: #bfe9cf;
    --mint-deep: #1f7a3a;
    --mint-soft: #e6f6ec;

    /* Acento */
    --accent: #e0145a;

    /* Componentes */
    --pill: #0e1116;
    --chip-in: var(--mint-soft);
    --chip-in-ink: var(--mint-deep);

    /* Tipografia */
    --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --fs-xs: 12px;
    --fs-sm: 13px;
    --fs-md: 14px;
    --fs-base: 15px;
    --fs-lg: 18px;
    --fs-xl: 22px;
    --fs-2xl: 24px;
    --fs-3xl: 30px;
    --fs-gauge: 46px;

    /* Forma */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 22px;
    --radius-pill: 999px;

    /* Sombras */
    --shadow: 0 10px 30px rgba(20, 20, 40, 0.06);
    --shadow-strong: 0 18px 40px rgba(120, 110, 220, 0.25);

    /* Espaçamento */
    --gap-sm: 12px;
    --gap-md: 18px;
    --gap-lg: 28px;
    --gap-xl: 36px;

    /* Layout */
    --sidebar-w: 240px;
    --main-pad-y: 28px;
    --main-pad-x: 36px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
}

/* ===== Links ===== */
a {
    color: var(--ink);
    text-decoration: none;
    transition: 0.2s;
}

a:hover {
    color: var(--lilac-deep);
}

/* ===== Headings ===== */
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: 700;
    letter-spacing: -0.02em;
}

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }

/* ===== Buttons ===== */
button, .btn, input[type="submit"] {
    font-family: var(--font);
    border: none;
    cursor: pointer;
    transition: 0.2s;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: var(--fs-base);
    padding: 12px 20px;
}

.btn-primary {
    background: var(--pill);
    color: #fff;
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

.btn-secondary {
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line);
}

.btn-secondary:hover {
    background: #f9f9f9;
}

/* ===== Forms ===== */
input, textarea, select {
    font-family: var(--font);
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    font-size: var(--fs-base);
    color: var(--ink);
    transition: 0.2s;
    width: 100%;
}

input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--lilac-deep);
    box-shadow: 0 0 0 3px var(--lilac-soft);
}

input::placeholder {
    color: var(--muted);
}

label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: var(--fs-sm);
    color: var(--ink);
}

.form-group {
    margin-bottom: var(--gap-md);
}

/* ===== Cards ===== */
.card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: var(--gap-xl);
}

/* ===== Utility Classes ===== */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.gap-sm { gap: var(--gap-sm); }
.gap-md { gap: var(--gap-md); }
.gap-lg { gap: var(--gap-lg); }
.gap-xl { gap: var(--gap-xl); }

.text-muted { color: var(--muted); }
.text-soft { color: var(--ink-soft); }

.mb-1 { margin-bottom: var(--gap-sm); }
.mb-2 { margin-bottom: var(--gap-md); }
.mb-3 { margin-bottom: var(--gap-lg); }
.mb-4 { margin-bottom: var(--gap-xl); }

.mt-1 { margin-top: var(--gap-sm); }
.mt-2 { margin-top: var(--gap-md); }
.mt-3 { margin-top: var(--gap-lg); }
.mt-4 { margin-top: var(--gap-xl); }

/* ===== Badges ===== */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: 600;
}

.badge-mint {
    background: var(--mint-soft);
    color: var(--mint-deep);
}

.badge-lilac {
    background: var(--lilac-soft);
    color: var(--lilac-deep);
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    :root {
        --main-pad-x: 18px;
        --main-pad-y: 18px;
    }
}