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

:root {
    --ng-primary: #2563eb;
    --ng-primary-hover: #1d4ed8;
    --ng-surface: #ffffff;
    --ng-surface-muted: #f8fafc;
    --ng-page: #f6f8fc;
    --ng-text: #172033;
    --ng-text-muted: #5f6b7e;
    --ng-border: #dce3ee;
    --ng-success: #059669;
    --ng-warning: #f59e0b;
    --ng-danger: #dc2626;
    --ng-radius: 12px;
    --ng-radius-lg: 16px;
    --ng-shadow-sm: 0 2px 8px rgba(23, 32, 51, 0.06);
    --ng-shadow-md: 0 10px 28px rgba(23, 32, 51, 0.08);
}

html { background: var(--ng-page); }

body {
    background: var(--ng-page);
    color: var(--ng-text);
    font-family: 'Inter', system-ui, sans-serif;
}

.ng-navbar {
    background: var(--ng-surface);
    border-bottom: 1px solid var(--ng-border);
}

.ng-navbar .navbar-brand,
.ng-navbar .nav-link { color: var(--ng-text); }

.ng-navbar .nav-link:hover,
.ng-navbar .nav-link.active { color: var(--ng-primary); }

.ng-content-card {
    background: var(--ng-surface);
    border: 1px solid var(--ng-border);
    border-radius: var(--ng-radius-lg);
    box-shadow: var(--ng-shadow-sm);
}