/*
 * Custom CSS for Nexus Cart Orderform
 *
 * This file allows you to customize the theme colors and styles for the Nexus Cart orderform.
 *
 * To customize colors:
 * - Replace the var() references with your own hex colors or other CSS values.
 * - For example, instead of --vl-primary: var(--zinc-900); use --vl-primary: #your-color;
 * - You can also override any CSS properties here.
 *
 * Note: Changes here will apply to the orderform's Shadow DOM.
 */

/* Add you custom styles here */
/* F4WEB Dark Theme Overrides for Nexus Cart */
:host,
:root {
    /* Primary colors - Brand 500 (#0ea5e9) */
    --vl-primary: #0ea5e9;
    --vl-primary-lifted: #0284c7;
    /* Brand 600 */
    --vl-primary-accented: #38bdf8;
    /* Brand 400 */

    /* Backgrounds - Dark 950 (#020617) & Dark 900 (#0f172a) */
    --vl-bg: #020617;
    --vl-bg-muted: #0f172a;
    --vl-bg-lifted: #1e293b;
    /* Dark 800 */
    --vl-bg-accented: #1e293b;
    --vl-bg-inverted: #ffffff;

    /* Text - Slate 200/300 */
    --vl-text: #e2e8f0;
    --vl-text-muted: #94a3b8;
    --vl-text-lifted: #f8fafc;
    --vl-text-accented: #38bdf8;
    /* Brand 400 */
    --vl-text-inverted: #0f172a;

    /* Borders - White/10 */
    --vl-border: rgba(255, 255, 255, 0.1);
    --vl-border-muted: rgba(255, 255, 255, 0.05);
    --vl-border-lifted: rgba(255, 255, 255, 0.2);
    --vl-border-accented: #0ea5e9;

    /* Inputs */
    --vl-input-bg: #0f172a;
    --vl-input-border: rgba(255, 255, 255, 0.1);
    --vl-input-text: #e2e8f0;
}

/* Additional Force Overrides for specific elements if variables don't catch everything */
#nexus-root {
    background-color: transparent !important;
}

body {
    background-color: #020617 !important;
}

.panel,
.card {
    background-color: #0f172a !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #e2e8f0 !important;
}