/* ============================================
   LIQUID GOLD & MARBLE THEMES
   Dedicated palette + component overrides
   ============================================ */

/* =============================================
   LIQUID GOLD: Ivory canvas with molten gold accents
============================================= */
html[data-theme="liquid-gold-pour"],
:root[data-theme="liquid-gold-pour"] {
    --color-background: #fffaee;
    --color-surface: rgba(255, 252, 240, 0.92);
    --color-surface-subtle: rgba(200, 160, 60, 0.08);
    --color-surface-elevated: #ffffff;

    --text-primary: #3a2608;
    --text-secondary: #6b4a18;
    --text-tertiary: #a07f3a;

    --border-light: rgba(200, 160, 60, 0.22);
    --border-medium: rgba(200, 160, 60, 0.40);
    --border-dark: rgba(180, 130, 30, 0.65);

    --google-blue: #c8a347;
    --google-blue-light: #e8c468;
    --google-blue-dark: #9b7a22;
    --google-blue-subtle: rgba(200, 163, 71, 0.14);

    --google-red: #c8783a;
    --google-yellow: #ffd76a;
    --google-green: #b89236;

    --theme-radius-md: 16px;
    --theme-radius-lg: 22px;
    --theme-border-width: 1px;
    --theme-shadow-sm: 0 4px 14px rgba(180, 130, 30, 0.10);
    --theme-shadow-md: 0 10px 26px rgba(180, 130, 30, 0.16);
}

html[data-theme="liquid-gold-pour"] body { background: transparent; }

html[data-theme="liquid-gold-pour"] .glass-card {
    background: rgba(255, 252, 240, 0.78);
    border: 1px solid var(--border-light);
    border-radius: var(--theme-radius-lg);
    box-shadow: var(--theme-shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

html[data-theme="liquid-gold-pour"] .glass-card:hover {
    box-shadow: 0 14px 34px rgba(180, 130, 30, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
    border-color: var(--border-medium);
}

html[data-theme="liquid-gold-pour"] .btn,
html[data-theme="liquid-gold-pour"] .btn-primary,
html[data-theme="liquid-gold-pour"] button:not(.pill-nav__item):not(.pill-nav__toggle) {
    background: linear-gradient(135deg, #c8a347 0%, #e8c468 50%, #b8841e 100%);
    border: 1px solid rgba(180, 130, 30, 0.45);
    border-radius: var(--theme-radius-md);
    color: #fffaee;
    padding: 0.7rem 1.4rem;
    box-shadow: 0 4px 12px rgba(180, 130, 30, 0.28), inset 0 1px 0 rgba(255, 248, 220, 0.55);
    text-shadow: 0 1px 0 rgba(80, 50, 10, 0.35);
    transition: all 0.3s ease;
}

html[data-theme="liquid-gold-pour"] .btn:hover,
html[data-theme="liquid-gold-pour"] .btn-primary:hover {
    background: linear-gradient(135deg, #b8841e 0%, #d4a93e 50%, #9b7a22 100%);
    box-shadow: 0 8px 22px rgba(180, 130, 30, 0.40), inset 0 1px 0 rgba(255, 248, 220, 0.65);
    transform: translateY(-1px);
}

html[data-theme="liquid-gold-pour"] .pill-nav {
    background: rgba(255, 252, 240, 0.82);
    border: 1px solid var(--border-light);
    border-radius: 28px;
    box-shadow: 0 6px 20px rgba(180, 130, 30, 0.12);
    backdrop-filter: blur(12px) saturate(140%);
}

html[data-theme="liquid-gold-pour"] .pill-nav__item {
    border-radius: 20px;
    color: var(--text-secondary);
    transition: all 0.3s ease;
}

html[data-theme="liquid-gold-pour"] .pill-nav__item:hover {
    background: rgba(200, 163, 71, 0.12);
    color: var(--text-primary);
}

html[data-theme="liquid-gold-pour"] .pill-nav__item.active {
    background: linear-gradient(135deg, #c8a347, #e8c468);
    color: #fffaee;
    box-shadow: 0 2px 10px rgba(180, 130, 30, 0.35);
}

html[data-theme="liquid-gold-pour"] input,
html[data-theme="liquid-gold-pour"] select,
html[data-theme="liquid-gold-pour"] textarea {
    background: rgba(255, 252, 240, 0.85);
    border: 1px solid var(--border-light);
    border-radius: var(--theme-radius-md);
    color: var(--text-primary);
    padding: 0.7rem 1rem;
    transition: all 0.3s ease;
}

html[data-theme="liquid-gold-pour"] input:focus,
html[data-theme="liquid-gold-pour"] select:focus,
html[data-theme="liquid-gold-pour"] textarea:focus {
    border-color: var(--google-blue);
    box-shadow: 0 0 0 3px rgba(200, 163, 71, 0.18);
    outline: none;
}

html[data-theme="liquid-gold-pour"] a {
    color: var(--google-blue-dark);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}

html[data-theme="liquid-gold-pour"] a:hover { border-bottom-color: var(--google-blue); }

/* =============================================
   MARBLE: Carrara stone with grey + gold veining
============================================= */
html[data-theme="marble"],
:root[data-theme="marble"] {
    --color-background: #f3eee3;
    --color-surface: rgba(255, 253, 247, 0.88);
    --color-surface-subtle: rgba(80, 70, 50, 0.05);
    --color-surface-elevated: #ffffff;

    --text-primary: #2a2620;
    --text-secondary: #58504a;
    --text-tertiary: #8a8278;

    --border-light: rgba(120, 105, 75, 0.18);
    --border-medium: rgba(120, 105, 75, 0.35);
    --border-dark: rgba(80, 70, 45, 0.55);

    --google-blue: #6b5b3a;
    --google-blue-light: #8a7850;
    --google-blue-dark: #4a3e26;
    --google-blue-subtle: rgba(107, 91, 58, 0.10);

    --google-red: #8a4a3a;
    --google-yellow: #c8a347;
    --google-green: #6b6b50;

    --theme-radius-md: 6px;
    --theme-radius-lg: 10px;
    --theme-border-width: 1px;
    --theme-shadow-sm: 0 3px 10px rgba(70, 60, 45, 0.08);
    --theme-shadow-md: 0 8px 22px rgba(70, 60, 45, 0.14);
}

html[data-theme="marble"] body { background: transparent; }

html[data-theme="marble"] .glass-card {
    background: rgba(255, 253, 247, 0.72);
    border: 1px solid var(--border-light);
    border-radius: var(--theme-radius-lg);
    box-shadow: var(--theme-shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(16px) saturate(130%);
    -webkit-backdrop-filter: blur(16px) saturate(130%);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

/* Hairline gold vein highlight on each card top edge */
html[data-theme="marble"] .glass-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(200, 163, 71, 0.55) 30%, rgba(200, 163, 71, 0.85) 50%, rgba(200, 163, 71, 0.55) 70%, transparent 100%);
    pointer-events: none;
}

html[data-theme="marble"] .glass-card:hover {
    box-shadow: 0 12px 30px rgba(70, 60, 45, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
    border-color: var(--border-medium);
}

html[data-theme="marble"] .btn,
html[data-theme="marble"] .btn-primary,
html[data-theme="marble"] button:not(.pill-nav__item):not(.pill-nav__toggle) {
    background: linear-gradient(135deg, #ffffff 0%, #f3eee3 50%, #e8e0cd 100%);
    border: 1px solid var(--border-medium);
    border-radius: var(--theme-radius-md);
    color: var(--text-primary);
    padding: 0.7rem 1.4rem;
    box-shadow: 0 3px 10px rgba(70, 60, 45, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transition: all 0.3s ease;
}

html[data-theme="marble"] .btn:hover,
html[data-theme="marble"] .btn-primary:hover {
    background: linear-gradient(135deg, #fffdf7 0%, #efe8d6 50%, #d8cdb2 100%);
    border-color: var(--google-yellow);
    box-shadow: 0 6px 16px rgba(180, 130, 30, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.95);
    transform: translateY(-1px);
}

html[data-theme="marble"] .pill-nav {
    background: rgba(255, 253, 247, 0.82);
    border: 1px solid var(--border-light);
    border-radius: 18px;
    box-shadow: 0 4px 14px rgba(70, 60, 45, 0.10);
    backdrop-filter: blur(14px) saturate(120%);
}

html[data-theme="marble"] .pill-nav__item {
    border-radius: var(--theme-radius-md);
    color: var(--text-secondary);
    transition: all 0.25s ease;
}

html[data-theme="marble"] .pill-nav__item:hover {
    background: rgba(120, 105, 75, 0.10);
    color: var(--text-primary);
}

html[data-theme="marble"] .pill-nav__item.active {
    background: linear-gradient(135deg, #2a2620, #4a3e26);
    color: #f3eee3;
    box-shadow: 0 2px 8px rgba(70, 60, 45, 0.30);
}

html[data-theme="marble"] input,
html[data-theme="marble"] select,
html[data-theme="marble"] textarea {
    background: rgba(255, 253, 247, 0.85);
    border: 1px solid var(--border-medium);
    border-radius: var(--theme-radius-md);
    color: var(--text-primary);
    padding: 0.7rem 1rem;
    transition: all 0.3s ease;
}

html[data-theme="marble"] input:focus,
html[data-theme="marble"] select:focus,
html[data-theme="marble"] textarea:focus {
    border-color: var(--google-yellow);
    box-shadow: 0 0 0 3px rgba(200, 163, 71, 0.20);
    outline: none;
}

html[data-theme="marble"] a {
    color: var(--google-blue-dark);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}

html[data-theme="marble"] a:hover { border-bottom-color: var(--google-yellow); }