/* ===================================================
   Theme Variables — Dark (default) + Light mode
   =================================================== */

/* ---------- Dark Mode (default) ---------- */
:root {
    /* Backgrounds */
    --t-bg-deep: #141418;
    --t-bg: #1f1f27;
    --t-bg-elevated: #262630;
    --t-card-bg: #2d2d37;
    --t-card-bg-hover: #35354a;

    /* Header */
    --t-header-bg: linear-gradient(135deg, #1f1f27, #2d2d37);
    --t-header-border: #5b4832;
    --t-header-title: #FFB703;
    --t-header-subtitle: #A1A1A6;

    /* Accents */
    --t-orange: #FF6B35;
    --t-orange-light: #FF8C5A;
    --t-orange-dark: #E85D04;
    --t-gold: #FFB703;
    --t-gold-light: #FFC933;
    --t-gold-dark: #E0A200;

    /* Text */
    --t-text-primary: #F5F5F7;
    --t-text-secondary: #A1A1A6;
    --t-text-muted: #6E6E73;

    /* Borders */
    --t-border: #5b4832;
    --t-border-light: #7a6245;

    /* Muted / Surface */
    --t-muted: #2d2d37;

    /* Shadows */
    --t-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
    --t-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2);
    --t-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.3);

    /* Footer */
    --t-footer-bg: linear-gradient(135deg, #1f1f27, #141418);
    --t-footer-border: #5b4832;
    --t-footer-brand: #FFB703;
    --t-footer-tagline: #A1A1A6;
    --t-footer-address: #6E6E73;
    --t-footer-copy: #48484A;
    --t-footer-copy-border: #38383A;

    /* Toggle button */
    --t-toggle-bg: rgba(255, 255, 255, 0.1);
    --t-toggle-border: rgba(255, 255, 255, 0.2);
    --t-toggle-color: #FFB703;

    /* Kampanya */
    --t-kampanya-bg: #1f1f27;
    --t-kampanya-border: #5b4832;
    --t-kampanya-card-bg: #2d2d37;

    /* Carousel */
    --t-carousel-border: #5b4832;
    --t-carousel-indicator: #FF6B35;
    --t-carousel-indicator-active: #FFB703;
    --t-carousel-bg: #1f1f27;

    /* Bottom sheet */
    --t-sheet-bg: #2d2d37;
    --t-sheet-handle: #7a6245;
    --t-sheet-close-bg: #2d2d37;
    --t-sheet-image-bg: #1f1f27;
    --t-sheet-meta-bg: #1f1f27;
    --t-sheet-alergen-bg: rgba(255, 107, 53, 0.1);

    /* Product card */
    --t-card-name: #F5F5F7;
    --t-card-subtitle: #FF6B35;
    --t-card-desc: #A1A1A6;
    --t-card-price: #FFB703;
    --t-card-calorie-bg: #262630;
    --t-card-calorie-text: #6E6E73;
    --t-card-hover-border: #FF6B35;

    /* Card h3 title */
    --t-card-h3-bg: linear-gradient(216deg, rgb(109 94 71 / 90%), rgb(49 44 37 / 90%));
    --t-card-h3-color: #F5F5F7;
}

/* ---------- Light Mode ---------- */
.light-mode {
    /* Backgrounds */
    --t-bg-deep: #f5f0eb;
    --t-bg: #ffffff;
    --t-bg-elevated: #e8eef5;
    --t-card-bg: #eaf0f7;
    --t-card-bg-hover: #dce6f0;

    /* Header */
    --t-header-bg: linear-gradient(135deg, #3a5b96, #2d4a7a);
    --t-header-border: #3a5b96;
    --t-header-title: #ffffff;
    --t-header-subtitle: rgba(255, 255, 255, 0.85);

    /* Accents */
    --t-orange: #3a5b96;
    --t-orange-light: #4a6fa8;
    --t-orange-dark: #2d4a7a;
    --t-gold: #3a5b96;
    --t-gold-light: #4a6fa8;
    --t-gold-dark: #2d4a7a;

    /* Text */
    --t-text-primary: #2d3436;
    --t-text-secondary: #636e72;
    --t-text-muted: #95a5a6;

    /* Borders */
    --t-border: #c4d4e6;
    --t-border-light: #b0c4d8;

    /* Muted / Surface */
    --t-muted: #e8eef5;

    /* Shadows */
    --t-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --t-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
    --t-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);

    /* Footer */
    --t-footer-bg: linear-gradient(135deg, #0a4275, #083560);
    --t-footer-border: #0a4275;
    --t-footer-brand: #ffffff;
    --t-footer-tagline: rgba(255, 255, 255, 0.9);
    --t-footer-address: rgba(255, 255, 255, 0.8);
    --t-footer-copy: rgba(255, 255, 255, 0.7);
    --t-footer-copy-border: rgba(255, 255, 255, 0.15);

    /* Toggle button */
    --t-toggle-bg: rgba(255, 255, 255, 0.15);
    --t-toggle-border: rgba(255, 255, 255, 0.3);
    --t-toggle-color: #ffffff;

    /* Kampanya */
    --t-kampanya-bg: #eaf0f7;
    --t-kampanya-border: #c4d4e6;
    --t-kampanya-card-bg: #ffffff;

    /* Carousel */
    --t-carousel-border: #c4d4e6;
    --t-carousel-indicator: #3a5b96;
    --t-carousel-indicator-active: #3a5b96;
    --t-carousel-bg: #ffffff;

    /* Bottom sheet */
    --t-sheet-bg: #ffffff;
    --t-sheet-handle: #c4d4e6;
    --t-sheet-close-bg: #e8eef5;
    --t-sheet-image-bg: #eaf0f7;
    --t-sheet-meta-bg: #e8eef5;
    --t-sheet-alergen-bg: #eaf0f7;

    /* Product card */
    --t-card-name: #2d3436;
    --t-card-subtitle: #3a5b96;
    --t-card-desc: #636e72;
    --t-card-price: #3a5b96;
    --t-card-calorie-bg: #f5f0eb;
    --t-card-calorie-text: #95a5a6;
    --t-card-hover-border: #3a5b96;

    /* Card h3 title */
    --t-card-h3-bg: azure;
    --t-card-h3-color: #355C7D;
}

/* Light mode: dialog product title */
.light-mode .product-dialog-title {
    color: #2d4a7a !important;
}

/* Light mode: category card image background */
.light-mode .menu-card img {
    background: linear-gradient(180deg, #5576b1, #284169) !important;
}