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

:root {
    --ob-font-sans: 'Inter', sans-serif;
    --ob-color-primary: #0037A3;
    --ob-color-secondary: #FEC331;
    --ob-color-dark: #001D5C;
    --ob-color-light: #EAF1FF;
    --ob-color-surface: #F6F9FF;
    --ob-color-success: #10B981;
    --ob-color-warning: #F59E0B;
    --ob-color-danger: #EF4444;
    --ob-color-ink: #0F172A;
    --ob-color-muted: #64748B;
    --ob-shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.08);
    --ob-shadow-card: 0 12px 40px rgba(15, 23, 42, 0.08);
    --ob-shadow-premium: 0 20px 50px rgba(0, 55, 163, 0.12);
    --ob-radius-lg: 1rem;
    --ob-radius-xl: 1.25rem;
    --ob-radius-2xl: 1.5rem;
    --ob-radius-3xl: 2rem;
    --ob-transition: 180ms ease;
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--ob-font-sans);
    background: #f8fafc;
    color: var(--ob-color-ink);
}

.ob-btn-primary,
.ob-btn-secondary,
.ob-btn-ghost,
.ob-input,
.ob-card,
.ob-surface,
.ob-pill {
    transition: all var(--ob-transition);
}

.ob-btn-primary {
    border: 0;
    border-radius: var(--ob-radius-lg);
    background: var(--ob-color-primary);
    color: #fff;
    box-shadow: var(--ob-shadow-soft);
    font-weight: 700;
    cursor: pointer;
}

.ob-btn-primary:hover {
    background: var(--ob-color-dark);
}

.ob-btn-secondary {
    border: 1px solid rgba(0, 55, 163, 0.12);
    border-radius: var(--ob-radius-lg);
    background: #fff;
    color: var(--ob-color-primary);
    box-shadow: var(--ob-shadow-soft);
    font-weight: 700;
    cursor: pointer;
}

.ob-btn-ghost {
    border: 1px solid #e2e8f0;
    border-radius: var(--ob-radius-lg);
    background: #fff;
    color: #334155;
    font-weight: 700;
    cursor: pointer;
}

.ob-input {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: var(--ob-radius-lg);
    background: #fff;
    color: var(--ob-color-ink);
    outline: none;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

.ob-input:focus {
    border-color: var(--ob-color-primary);
    box-shadow: 0 0 0 4px rgba(0, 55, 163, 0.12);
}

.ob-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: var(--ob-radius-3xl);
    box-shadow: var(--ob-shadow-soft);
}

.ob-surface {
    background: var(--ob-color-surface);
    border: 1px solid #e2e8f0;
    border-radius: var(--ob-radius-2xl);
}

.ob-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
}

.ob-status-success {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}

.ob-status-warning {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
}

.ob-status-danger {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #e2e8f0;
    border-radius: 999px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 999px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}