@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Lato:wght@300;400;600;700&family=Dancing+Script:wght@700&display=swap');

/* ── Cigar Lounge Design Tokens (Light) ─────────────────────────── */
:root,
.theme-light {
    --cl-bg: #fdf6ec;
    --cl-bg-warm: #f5ead8;
    --cl-bg-card: #ffffff;
    --cl-bg-card-alt: #fdf0e0;

    --cl-border: #d9c8a8;
    --cl-border-strong: #b89a60;

    --cl-gold: #8b6914;
    --cl-gold-rich: #a07820;
    --cl-gold-light: #c9a84c;
    --cl-gold-bg: #fdf3dc;

    --cl-mahogany: #3d1a0a;
    --cl-mahogany-mid: #5c2d0f;
    --cl-bourbon: #7a3b10;

    --cl-text: #2a1a08;
    --cl-text-mid: #4a3520;
    --cl-text-muted: #7a6040;

    --cl-cream: #fdf6ec;

    --cl-ember: #b83225;

    --cl-green: #2d6640;
    --cl-green-bg: #e8f5ec;
    --cl-green-border: #4a9460;

    --cl-yellow-bg: #fff8dc;
    --cl-yellow-border: #c8980a;
    --cl-yellow-text: #7a5c00;

    --cl-ash: #c0b090;
    --cl-ash-bg: #f0ebe0;
}

/* ── Theme: Dark ───────────────────────────────────────────────── */
.theme-dark {
    --cl-bg: #1a1410;
    --cl-bg-warm: #221a14;
    --cl-bg-card: #2a211a;
    --cl-bg-card-alt: #33271f;

    --cl-border: #4a3a2a;
    --cl-border-strong: #6a5238;

    --cl-gold: #c9a84c;
    --cl-gold-rich: #e0b85c;
    --cl-gold-light: #f2d27a;
    --cl-gold-bg: #3a2e1a;

    --cl-mahogany: #2a1208;
    --cl-mahogany-mid: #3a1a0c;
    --cl-bourbon: #9a4a1a;

    --cl-text: #f5e6d3;
    --cl-text-mid: #d8c3a5;
    --cl-text-muted: #a89070;

    --cl-cream: #2a211a;

    --cl-ember: #ff5a3c;

    --cl-green: #4fa36c;
    --cl-green-bg: #1e3a2a;
    --cl-green-border: #4fa36c;

    --cl-yellow-bg: #3a3215;
    --cl-yellow-border: #d4a017;
    --cl-yellow-text: #f2d27a;

    --cl-ash: #8a7a60;
    --cl-ash-bg: #2a241d;
}

/* ── Theme: Emerald Lounge ─────────────────────────────────────── */
.theme-emerald {
    --cl-bg:            #0f1a16;
    --cl-bg-warm:       #16241f;
    --cl-bg-card:       #1b2e27;
    --cl-bg-card-alt:   #223a31;

    --cl-border:        #2e4a3f;
    --cl-border-strong: #3f6a5a;

    --cl-gold:          #c8a75a;
    --cl-gold-rich:     #e0bb6d;
    --cl-gold-light:    #f5d48a;
    --cl-gold-bg:       #2a2415;

    --cl-mahogany:      #10221c;
    --cl-mahogany-mid:  #18352c;
    --cl-bourbon:       #7a4a1a;

    --cl-text:          #e6f2ec;
    --cl-text-mid:      #b7d3c7;
    --cl-text-muted:    #7fa89a;

    --cl-cream:         #1b2e27;

    --cl-ember:         #ff6b4a;

    --cl-green:         #3fa372;
    --cl-green-bg:      #18352c;
    --cl-green-border:  #3fa372;

    --cl-yellow-bg:     #2f2a14;
    --cl-yellow-border: #d4af37;
    --cl-yellow-text:   #f0d878;

    --cl-ash:           #6f7f78;
    --cl-ash-bg:        #1a2621;
}

/* ── Theme: Midnight Neon ──────────────────────────────────────── */
.theme-neon {
    --cl-bg:            #0a0a0f;
    --cl-bg-warm:       #12121a;
    --cl-bg-card:       #161622;
    --cl-bg-card-alt:   #1d1d2b;

    --cl-border:        #2a2a3a;
    --cl-border-strong: #3a3a52;

    --cl-gold:          #00f0ff;
    --cl-gold-rich:     #00d4ff;
    --cl-gold-light:    #66f7ff;
    --cl-gold-bg:       #0a2a2f;

    --cl-mahogany:      #11111a;
    --cl-mahogany-mid:  #1a1a28;
    --cl-bourbon:       #ff3d81;

    --cl-text:          #f4f6ff;
    --cl-text-mid:      #b8c0ff;
    --cl-text-muted:    #7a84c2;

    --cl-cream:         #161622;

    --cl-ember:         #ff3d81;

    --cl-green:         #00ffa6;
    --cl-green-bg:      #0f2a22;
    --cl-green-border:  #00ffa6;

    --cl-yellow-bg:     #2a2a10;
    --cl-yellow-border: #ffe066;
    --cl-yellow-text:   #fff3a3;

    --cl-ash:           #5a5f7a;
    --cl-ash-bg:        #141420;
}

/* ── Theme: Warm Sepia ─────────────────────────────────────────── */
.theme-sepia {
    --cl-bg:            #f4ecd8;
    --cl-bg-warm:       #e8dcc2;
    --cl-bg-card:       #fffaf0;
    --cl-bg-card-alt:   #f2e6cc;

    --cl-border:        #c9b89a;
    --cl-border-strong: #a8926e;

    --cl-gold:          #9c7a2b;
    --cl-gold-rich:     #b08934;
    --cl-gold-light:    #d1ae5a;
    --cl-gold-bg:       #f5ecd6;

    --cl-mahogany:      #4a2c12;
    --cl-mahogany-mid:  #6a3f1a;
    --cl-bourbon:       #8a4b1f;

    --cl-text:          #2f2416;
    --cl-text-mid:      #5a4630;
    --cl-text-muted:    #8a7254;

    --cl-cream:         #fffaf0;

    --cl-ember:         #b23a2a;

    --cl-green:         #4a7a52;
    --cl-green-bg:      #e3efe5;
    --cl-green-border:  #6a9a72;

    --cl-yellow-bg:     #faf3d6;
    --cl-yellow-border: #c9a23a;
    --cl-yellow-text:   #7a5a10;

    --cl-ash:           #b0a28a;
    --cl-ash-bg:        #ebe3d3;
}

/* ── Theme: Slate Blue ─────────────────────────────────────────── */
.theme-slate {
    --cl-bg:            #0f172a;
    --cl-bg-warm:       #1e293b;
    --cl-bg-card:       #1e293b;
    --cl-bg-card-alt:   #273449;

    --cl-border:        #334155;
    --cl-border-strong: #475569;

    --cl-gold:          #60a5fa;
    --cl-gold-rich:     #3b82f6;
    --cl-gold-light:    #93c5fd;
    --cl-gold-bg:       #1e3a8a;

    --cl-mahogany:      #020617;
    --cl-mahogany-mid:  #020617;
    --cl-bourbon:       #2563eb;

    --cl-text:          #e2e8f0;
    --cl-text-mid:      #cbd5f5;
    --cl-text-muted:    #94a3b8;

    --cl-cream:         #1e293b;

    --cl-ember:         #ef4444;

    --cl-green:         #22c55e;
    --cl-green-bg:      #052e1f;
    --cl-green-border:  #22c55e;

    --cl-yellow-bg:     #422006;
    --cl-yellow-border: #facc15;
    --cl-yellow-text:   #fde68a;

    --cl-ash:           #64748b;
    --cl-ash-bg:        #1e293b;
}

.theme-high-contrast {
    --cl-bg:            #000000;
    --cl-bg-warm:       #111111;
    --cl-bg-card:       #1a1a1a;
    --cl-bg-card-alt:   #222222;

    --cl-border:        #ffffff;
    --cl-border-strong: #ffffff;

    --cl-gold:          #ffff00;
    --cl-gold-rich:     #ffea00;
    --cl-gold-light:    #ffff66;
    --cl-gold-bg:       #333300;

    --cl-mahogany:      #ff0000;
    --cl-mahogany-mid:  #cc0000;
    --cl-bourbon:       #ff3300;

    --cl-text:          #ffffff;
    --cl-text-mid:      #dddddd;
    --cl-text-muted:    #aaaaaa;

    --cl-cream:         #f0f0f0;

    --cl-ember:         #ff3300;

    --cl-green:         #00ff00;
    --cl-green-bg:      #003300;
    --cl-green-border:  #00ff00;

    --cl-yellow-bg:     #333300;
    --cl-yellow-border: #ffff00;
    --cl-yellow-text:   #ffff00;

    --cl-ash:           #888888;
    --cl-ash-bg:        #111111;
}

.theme-andrew {
    /* Backgrounds */
    --cl-bg:            #ffffff;
    --cl-bg-warm:       #fefefe;
    --cl-bg-card:       #ffffff;
    --cl-bg-card-alt:   #f9f9f9;

    /* Borders */
    --cl-border:        #e0e0e0;
    --cl-border-strong: #cccccc;

    /* Gold accents (lightened to white shades) */
    --cl-gold: #ff0083;
    --cl-gold-rich: #ff00f0;
    --cl-gold-light:    #fcfcfc;
    --cl-gold-bg:       #f9f9f9;

    /* Mahogany / Bourbon (lightened to white shades) */
    --cl-mahogany: #dedede;
    --cl-mahogany-mid: #00ffdf;
    --cl-bourbon: #ff8bf0;

    /* Text */
    --cl-text:          #000000; /* Keep text readable */
    --cl-text-mid:      #333333;
    --cl-text-muted:    #666666;

    /* Cream / Ember */
    --cl-cream:         #ffffff;
    --cl-ember:         #f5f5f5;

    /* Greens */
    --cl-green:         #fefefe;
    --cl-green-bg:      #fcfcfc;
    --cl-green-border:  #f8f8f8;

    /* Yellows */
    --cl-yellow-bg:     #fcfcfc;
    --cl-yellow-border: #f9f9f9;
    --cl-yellow-text:   #f0f0f0;

    /* Ash */
    --cl-ash:           #e5e5e5;
    --cl-ash-bg:        #fefefe;
}

html, body {
    font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: var(--cl-bg);
    color: var(--cl-text);
    min-height: 100vh;
    transition: background-color 0.25s ease, color 0.25s ease;
}

a, .btn-link {
    color: var(--cl-gold-rich);
}

a:hover, .btn-link:hover {
    color: var(--cl-mahogany);
}

.btn-primary {
    color: #fff;
    background-color: var(--cl-mahogany);
    border-color: var(--cl-mahogany-mid);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem var(--cl-bg), 0 0 0 0.25rem var(--cl-gold-light);
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--cl-green);
}

.invalid {
    outline: 1px solid var(--cl-ember);
}

.validation-message {
    color: var(--cl-ember);
}

.blazor-error-boundary {
    background: var(--cl-ember);
    padding: 1rem 1rem 1rem 3.7rem;
    color: #fff;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.darker-border-checkbox.form-check-input {
    border-color: var(--cl-border-strong);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}