:root {
    --color-bg: #ffffff;
    --color-surface: #ffffff;
    --color-primary: #0b3d91;
    /* azul profundo */
    --color-accent: #ff6b4a;
    /* coral */
    --color-muted: #6b7280;
    /* cinza */
    --color-text: #111827;
    --color-border: #e6eef8;
    --radius: 8px;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04);
    --font-base: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    --max-width: 1100px;
}

/* Dark mode tokens */
.dark {
    --color-bg: #0b1320;
    --color-surface: #0f1724;
    --color-primary: #8eb3ff;
    --color-accent: #ffb49a;
    --color-muted: #9ca3af;
    --color-text: #e6eef8;
    --color-border: rgba(255, 255, 255, 0.06);
}

body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-base);
}

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 20px
}

.card {
    background: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    padding: 14px
}

:root {
    --input-bg: #ffffff;
    --input-border: rgba(16, 24, 40, 0.08);
    --input-border-focus: var(--color-accent);
    --label-color: var(--color-primary);
    --placeholder-color: rgba(17, 24, 39, 0.45);
    --btn-primary-bg: var(--color-accent);
    --btn-primary-hover: #ff7f62;
    --btn-secondary-bg: #ffffff;
    --btn-secondary-border: var(--color-primary);
    --checkbox-size: 18px;
}