/* CallCompass Light UI — design tokens + Inter. Loaded before app.css/call.css. */
@font-face {
    font-family: 'Inter';
    src: url('/vendor/inter/inter-variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --page-bg: #F7F9FC;
    --surface: #FFFFFF;
    --surface-muted: #F3F6FA;
    --border: #DCE3ED;
    --border-strong: #C7D2E2;

    --text-primary: #172033;
    --text-secondary: #5E6B82;
    --text-muted: #8793A8;

    --brand-teal: #14A58C;
    --brand-teal-soft: #E8F8F4;
    --brand-blue: #2E7BEF;
    --brand-blue-soft: #E8F1FE;
    --brand-purple: #8A5CF5;
    --brand-purple-soft: #F0EBFD;
    --brand-gold: #E5A117;
    --brand-gold-soft: #FCF3E0;

    --success: #1FAF63;
    --warning: #F2A81D;
    --danger: #E5484D;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;

    --shadow-sm: 0 1px 2px rgba(25, 39, 66, 0.06);
    --shadow-md: 0 8px 24px rgba(25, 39, 66, 0.08);

    /* Map Bootstrap's theme vars onto the light system so stock components inherit it. */
    --bs-body-bg: var(--page-bg);
    --bs-body-color: var(--text-primary);
    --bs-border-color: var(--border);
    --bs-primary: var(--brand-teal);
    --bs-primary-rgb: 20, 165, 140;
    --bs-link-color: var(--brand-teal);
    --bs-link-hover-color: #0f8571;
}

* { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
body { background: var(--page-bg); color: var(--text-primary); }

/* Shared light primitives used across screens */
.text-secondary { color: var(--text-secondary) !important; }
.text-muted { color: var(--text-muted) !important; }
.cc-soft-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.cc-pill { border-radius: 999px; }

/* Buttons — teal primary, quiet secondaries */
.btn-teal, .btn-primary { background: var(--brand-teal); border-color: var(--brand-teal); color: #fff; }
.btn-teal:hover, .btn-primary:hover { background: #0f8b76; border-color: #0f8b76; color: #fff; }
.btn-outline-teal { color: var(--brand-teal); border: 1px solid var(--border-strong); background: var(--surface); }
.btn-outline-teal:hover { background: var(--brand-teal-soft); color: #0f8571; }

/* Semantic outcome/status text */
.text-teal { color: var(--brand-teal) !important; }
.text-gold { color: var(--brand-gold) !important; }
.badge-soft-success { background: #E6F7EE; color: var(--success); }
.badge-soft-blue { background: #E8F1FE; color: var(--brand-blue); }
.badge-soft-gold { background: #FBF1DC; color: #A8760F; }
.badge-soft-danger { background: #FCEBEC; color: var(--danger); }
.badge-soft-warning { background: #FDF3E0; color: #9A6A0B; }
.badge-soft-info { background: #E8F1FE; color: var(--brand-blue); }
.badge-soft-secondary { background: var(--surface-muted); color: var(--text-secondary); }
.badge-soft-gray { background: var(--surface-muted); color: var(--text-secondary); }

/* Inputs */
.form-control, .form-select { border-radius: var(--radius-sm); border-color: var(--border); background: var(--surface); color: var(--text-primary); min-height: 40px; }
.form-control:focus, .form-select:focus { border-color: var(--brand-teal); box-shadow: 0 0 0 3px rgba(20,165,140,.15); }

/* Tables — light, no dark */
.table { --bs-table-bg: transparent; color: var(--text-primary); }
.table thead th { color: var(--text-muted); font-weight: 600; font-size: .8rem; border-bottom: 1px solid var(--border); }
.table td, .table th { border-color: var(--border); }