/* Theme tokens shared by every page. The look is "After hours": deep navy, flat surfaces,
   hairline borders, no gradients or glows. */
:root {
    /* Native scrollbars, date pickers and form controls render dark to match. */
    color-scheme: dark;

    /* Surfaces, darkest to lightest */
    --bg-sidebar: #0a1220;
    --bg-dark: #0c1526;
    --bg-dark-rgb: 12, 21, 38;
    --bg-card: #0f1a2e;
    --bg-card-rgb: 15, 26, 46;
    /* Hover and selected rows, active nav items, chips. */
    --bg-raised: #16233d;

    --text-primary: #eef1f6;
    --text-secondary: #9aa7bd;
    /* Muted text that still passes WCAG AA (4.5:1) on --bg-card. */
    --text-muted: #8493a9;
    /* Hairlines between rows and around cards. */
    --border: #1c2842;
    /* Input and outline-button borders, which need to be seen. */
    --border-strong: #2a3a5c;
    /* Dark text on the few white surfaces (transcript cards, pills). */
    --text-on-light: #1e293b;

    /* Brand */
    --primary: #507bbe;
    --primary-rgb: 80, 123, 190;
    --primary-hover: #3f619a;
    /* Button fill: white text on --primary is 4.27:1, just under AA; this is 5.0:1. */
    --primary-strong: #4870ad;
    /* Links and small text on dark backgrounds: --primary is only 3.4:1 on --bg-card. */
    --primary-text: #8fb0e3;
    --secondary: #203a6f;
    --secondary-rgb: 32, 58, 111;
    --secondary-accent: #2d4f8f;

    /* Status */
    --success: #10b981;
    --success-rgb: 16, 185, 129;
    --success-text: #6ee7b7;
    --warning: #f59e0b;
    --warning-rgb: 245, 158, 11;
    --warning-text: #fbbf24;
    --danger: #ef4444;
    --danger-rgb: 239, 68, 68;
    --danger-text: #f87171;

    /* The one warm accent: upsells, leads, "new" highlights. Use it for tints, dots and
       text, not for fills under white text. */
    --premium: #e8b86b;
    --premium-rgb: 232, 184, 107;
    --premium-text: #f3cf93;
    /* Kept as names so older markup still works; both are now flat fills. */
    --premium-gradient: linear-gradient(var(--primary-strong), var(--primary-strong));
    --premium-gradient-hover: linear-gradient(var(--primary-hover), var(--primary-hover));

    /* Type */
    /* Headings share the body family, set heavier and tighter. */
    --font-display: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-body: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    /* Shape */
    --radius-sm: 6px;
    --radius: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 999px;

    /* Elevation: neutral black, for things that float (menus, modals, the widget). */
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-2: 0 24px 48px -24px rgba(0, 0, 0, 0.6);
}