@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    --bg-body: #e7edf4;
    --op-surface-app: #e7edf4;
    --op-surface-page: #f6f8fb;
    --op-surface-raised: #ffffff;
    --op-surface-muted: #f1f5f9;
    --op-surface-subtle: #eef3f8;
    --op-surface-pill: #e8edff;
    --op-border-soft: rgba(148, 163, 184, 0.22);
    --op-border-muted: #e2e8f0;
    --op-border-strong: #cbd5e1;
    --op-text-strong: #0f172a;
    --op-text-body: #334155;
    --op-text-muted: #64748b;
    --op-shadow-xs: 0 1px 3px rgba(15, 23, 42, 0.05);
    --op-shadow-sm: 0 12px 30px rgba(15, 23, 42, 0.08);
    --op-shadow-lg: 0 25px 50px -12px rgba(15, 23, 42, 0.22);
    --op-overlay: rgba(15, 23, 42, 0.46);
    --primary-accent: #0d6efd;
    --success-soft: #e8f5e9;
    --warning-soft: #fffde7;
    --danger-soft: #ffebee;
    /* Overrides do Bootstrap */
    --bs-primary: #0d6efd;
    --bs-success: #10b981;
    --bs-warning: #f59e0b;
    --bs-danger: #ef4444;
    --bs-body-bg: var(--op-surface-page);
    --bs-body-color: var(--op-text-body);
    --bs-secondary-color: var(--op-text-muted);
    --bs-border-color: var(--op-border-muted);
    --bs-light-rgb: 241, 245, 249;
    --bs-tertiary-bg: var(--op-surface-muted);
}

html,
body {
    min-height: 100%;
}

body {
    font-family: 'Inter', sans-serif;
    background: linear-gradient(180deg, var(--op-surface-app) 0, var(--op-surface-page) 140px, var(--op-surface-page) 100%);
    color: var(--op-text-body);
    letter-spacing: -0.01em;
}