/*
 * QRCrest dashboard theme: page-level tokens.
 *
 * The dashboard is the vendor's compiled Lit bundle (shadow DOM), so this file
 * only sets the CSS custom properties the bundle reads, plus a few light-DOM
 * rules. Per-component styles live in dashboard-theme.js, which adds them to
 * each component's shadow root. Both files are scoped to html.qc-dash, which
 * dashboard-theme.js sets on dashboard URLs only (the same bundle also renders
 * the login, checkout and home-page wizard, which have their own theme).
 */

html.qc-dash {
    /* Brand */
    --qc-navy: #0b1033;
    --qc-ink: #0e1330;
    --qc-azure: #2b3fe6;
    --qc-azure-d: #1e2db8;
    --qc-gold: #f5b524;
    --qc-gold-d: #b7800a;
    --qc-violet: #7c3aed;
    --qc-green: #1b8f5a;
    --qc-red: #dc2626;
    --qc-surface: #f5f6fb;
    --qc-tint: #eef1ff;
    --qc-tint-2: #dde3ff;
    --qc-border: #e8edf7;
    --qc-border-2: #d9dfee;
    --qc-sec: #5b6480;
    --qc-muted: #8a92ad;
    --qc-green-bg: #e6f7ee;
    --qc-gold-bg: #fff4d6;
    --qc-red-bg: #fde8e8;
    --qc-violet-bg: #efe9ff;

    --qc-font: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --qc-display: 'Bricolage Grotesque', 'Geist', ui-sans-serif, system-ui, sans-serif;

    --qc-radius: 12px;
    --qc-radius-card: 20px;
    --qc-shadow-card: 0 6px 20px -10px rgb(14 19 48 / 0.08);
    --qc-shadow-hover: 0 16px 36px -16px rgb(14 19 48 / 0.22);
    --qc-shadow-primary: 0 8px 20px -8px rgb(43 63 230 / 0.5);
    --qc-ring: 0 0 0 4px rgb(43 63 230 / 0.14);

    /* Vendor variables, mapped to the brand */
    --qrcg-font-family: var(--qc-font);
    --primary-0: var(--qc-azure);
    --primary-1: var(--qc-azure-d);
    --info-0: var(--qc-azure);
    --dark: var(--qc-ink);
    --gray-0: var(--qc-surface);
    --gray-1: var(--qc-border);
    --gray-2: var(--qc-muted);
    --qrcg-gray-0: #f7f8fc;
    --qrcg-gray-1: #eef1f7;
    --qrcg-gray-2: #e3e7f1;
    --qrcg-gray-3: var(--qc-sec);
    --qrcg-gray-4: #3b4260;
    --qrcg-black-1: var(--qc-ink);
    --success-0: var(--qc-green);
    --danger: var(--qc-red);
    --danger-1: #b91c1c;
    --dynamic-ribbon-color: var(--qc-azure);
    --qrcg-input-box-shadow: inset 0 0 0 1px var(--qc-border-2);
    --qrcg-input-box-shadow-focus: inset 0 0 0 1px var(--qc-azure), var(--qc-ring);

    /* Shell: navy sidebar, white header */
    --dashboard-sidebar-width: 16.5rem;
    --settings-dashboard-header-height: 4.25rem;
    --dashboard-sidebar-background-color: var(--qc-navy);
    --dashboard-sidebar-text-color: rgb(255 255 255 / 0.78);
    --dashboard-sidebar-hover-text-color: #fff;
    --dashboard-sidebar-hover-background-color: rgb(255 255 255 / 0.07);
    --dashboard-sidebar-border-color: rgb(255 255 255 / 0.1);
    --dashboard-sidebar-border-color-hover: rgb(255 255 255 / 0.22);
    --dashboard-subnavigation-background-color: #fff;
    --dashboard-subnavigation-text-color: var(--qc-sec);
    --dashboard-subnavigation-hover-text-color: var(--qc-ink);
    --dashboard-subnavigation-hover-background-color: var(--qc-tint);
}

html.qc-dash body.dashboard-page {
    background: var(--qc-surface) !important;
    color: var(--qc-ink);
    font-family: var(--qc-font);
    -webkit-font-smoothing: antialiased;
    padding-top: 0;
}

html.qc-dash ::selection {
    background: var(--qc-tint-2);
}