/* ==========================================================================
   THEME — centralized design tokens
   Light / dark via prefers-color-scheme (system setting)
   Brand: cream #FDFBF7 · ink #5C4F45 · accent #A68A73
   Semantic aliases: --background-*, --text-*, --border-color, --accent-color
   ========================================================================== */

:root {
    color-scheme: light;

    /* —— Brand primitives (single source) —— */
    --brand-cream: #FDFBF7;
    --brand-cream-elevated: #FEFCF9;
    --brand-cream-muted: #F5F0EB;
    --brand-ink: #5C4F45;
    --brand-ink-deep: #4A4038;
    --brand-ink-darker: #3D3530;
    --brand-ink-darkest: #2A2623;
    --brand-accent: #A68A73;
    --brand-accent-hover: #8F735E;
    --brand-accent-soft: #B8997F;
    --brand-accent-light: #C4A484;
    --brand-accent-lighter: #C9AB92;
    --brand-accent-pale: #D0B090;
    --brand-white: #FFFFFF;
    --brand-black: #000000;

    /* —— Semantic aliases (API for components) —— */
    --background-primary: var(--theme-bg);
    --background-secondary: var(--theme-bg-elevated);
    --text-primary: var(--theme-text);
    --text-muted: var(--theme-text-muted);
    --border-color: var(--theme-border);
    --accent-color: var(--theme-primary);

    /* Backgrounds */
    --theme-bg: var(--brand-cream);
    --theme-bg-elevated: var(--brand-cream-elevated);
    --theme-bg-muted: var(--brand-cream-muted);
    --theme-bg-subtle: rgba(166, 138, 115, 0.06);
    --theme-bg-overlay: rgba(42, 38, 35, 0.45);
    --theme-bg-hover: rgba(166, 138, 115, 0.1);
    --theme-bg-active: rgba(166, 138, 115, 0.16);

    /* Text */
    --theme-text: var(--brand-ink);
    --theme-text-muted: rgba(92, 79, 69, 0.72);
    --theme-text-subtle: rgba(92, 79, 69, 0.55);
    --theme-text-inverse: var(--brand-cream);
    --theme-text-link: var(--brand-accent);
    --theme-text-link-hover: var(--brand-ink);
    --theme-text-price: var(--brand-ink);
    --theme-text-price-sale: var(--brand-accent);
    --theme-text-price-old: #9A8B82;
    --theme-text-on-media: var(--brand-cream);
    --theme-text-on-media-muted: rgba(253, 251, 247, 0.88);

    /* Brand accents */
    --theme-primary: var(--brand-accent);
    --theme-primary-hover: var(--brand-accent-hover);
    --theme-primary-dark: var(--brand-ink);
    --theme-primary-dark-hover: var(--brand-ink-deep);
    --theme-secondary: #8B7969;

    /* Semantic */
    --theme-success: #6B8F71;
    --theme-warning: #C9A227;
    --theme-error: #C45C5C;

    /* Borders & dividers */
    --theme-border: rgba(139, 121, 105, 0.14);
    --theme-border-strong: rgba(139, 121, 105, 0.28);
    --theme-divider: rgba(139, 121, 105, 0.12);
    --theme-border-on-media: rgba(253, 251, 247, 0.35);

    /* Shadows */
    --theme-shadow-sm: 0 6px 24px rgba(139, 121, 105, 0.08);
    --theme-shadow-md: 0 12px 40px rgba(139, 121, 105, 0.12);
    --theme-shadow-lg: 0 18px 48px rgba(139, 121, 105, 0.14);
    --theme-shadow-header: 0 8px 32px rgba(139, 121, 105, 0.1);
    --theme-shadow-ink: 0 12px 40px rgba(92, 79, 69, 0.14);

    /* Surfaces — header/footer share brand family */
    --theme-header-bg: rgba(253, 251, 247, 0.92);
    --theme-footer-bg: var(--brand-ink);
    --theme-footer-text: rgba(253, 251, 247, 0.88);
    --theme-footer-muted: rgba(253, 251, 247, 0.62);
    --theme-footer-policy: rgba(0, 0, 0, 0.12);
    --theme-nav-hover: rgba(166, 138, 115, 0.12);
    --theme-nav-mobile-bg: var(--brand-cream);
    --theme-modal-bg: var(--brand-cream-elevated);
    --theme-modal-overlay: rgba(42, 38, 35, 0.5);

    /* Buttons */
    --theme-btn-primary-bg: var(--brand-ink);
    --theme-btn-primary-text: var(--brand-cream);
    --theme-btn-primary-hover-bg: var(--brand-accent);
    --theme-btn-primary-hover-text: var(--brand-cream);
    --theme-btn-accent-bg: var(--brand-accent);
    --theme-btn-accent-text: var(--brand-cream);
    --theme-btn-accent-hover-bg: var(--brand-ink);
    --theme-btn-accent-hover-text: var(--brand-cream);
    --theme-btn-disabled-bg: rgba(139, 121, 105, 0.2);
    --theme-btn-disabled-text: rgba(92, 79, 69, 0.45);

    /* Cards */
    --theme-card-bg: var(--brand-cream-elevated);
    --theme-card-border: rgba(139, 121, 105, 0.1);
    --theme-card-shadow: 0 8px 32px rgba(139, 121, 105, 0.07);
    --theme-card-shadow-hover: 0 18px 48px rgba(139, 121, 105, 0.14);
    --theme-card-media-bg: var(--brand-cream-muted);

    /* Badges */
    --theme-badge-cat-bg: rgba(253, 251, 247, 0.92);
    --theme-badge-cat-text: var(--brand-accent);
    --theme-badge-sale-bg: var(--brand-accent);
    --theme-badge-sale-text: var(--brand-cream);
    --theme-badge-pct-bg: rgba(253, 251, 247, 0.95);
    --theme-badge-pct-text: var(--brand-ink);
    --theme-badge-tag-bg: rgba(166, 138, 115, 0.12);
    --theme-badge-tag-text: var(--brand-accent);

    /* Forms */
    --theme-input-bg: var(--brand-cream-elevated);
    --theme-input-text: var(--brand-ink);
    --theme-input-border: rgba(139, 121, 105, 0.22);
    --theme-input-placeholder: rgba(92, 79, 69, 0.45);

    /* Icons */
    --theme-icon: var(--brand-ink);
    --theme-icon-muted: var(--brand-accent);
    --theme-icon-inverse: var(--brand-cream);

    /* Floating cart */
    --theme-cart-float-bg: linear-gradient(135deg, var(--brand-ink) 0%, var(--brand-ink-darker) 100%);
    --theme-cart-float-bg-hover: linear-gradient(135deg, var(--brand-accent) 0%, var(--brand-ink) 100%);
    --theme-cart-float-text: var(--brand-cream);
    --theme-cart-badge-bg: var(--brand-accent);
    --theme-cart-badge-text: var(--brand-cream);

    /* Promo / hero */
    --theme-hero-text: var(--brand-cream);
    --theme-hero-overlay: linear-gradient(135deg, rgba(42, 38, 35, 0.55) 0%, rgba(92, 79, 69, 0.35) 100%);
    --theme-hero-text-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    --theme-hero-scrim:
        linear-gradient(105deg, rgba(42, 38, 35, 0.72) 0%, rgba(42, 38, 35, 0.28) 42%, rgba(42, 38, 35, 0.08) 100%),
        linear-gradient(0deg, rgba(42, 38, 35, 0.88) 0%, rgba(42, 38, 35, 0.45) 34%, transparent 68%);
    --theme-hero-scrim-mobile:
        linear-gradient(0deg, rgba(42, 38, 35, 0.92) 0%, rgba(42, 38, 35, 0.55) 42%, rgba(42, 38, 35, 0.2) 100%);
    --theme-promo-bg: linear-gradient(135deg, var(--brand-ink) 0%, var(--brand-ink-darker) 100%);
    --theme-promo-text: var(--brand-cream);

    /* Glassmorphism */
    --theme-glass-bg: rgba(254, 252, 249, 0.52);
    --theme-glass-border: rgba(255, 255, 255, 0.62);
    --theme-glass-highlight: rgba(255, 255, 255, 0.7);
    --theme-glass-shadow:
        0 12px 40px rgba(92, 79, 69, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);

    /* Category nav buttons */
    --theme-cat-nav-text: var(--brand-cream);
    --theme-cat-nav-border: rgba(255, 255, 255, 0.28);
    --theme-cat-nav-icon-bg: rgba(253, 251, 247, 0.22);
    --theme-cat-nav-icon-bg-hover: rgba(253, 251, 247, 0.32);
    --theme-cat-nav-shadow:
        0 10px 28px rgba(92, 79, 69, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
    --theme-cat-nav-shadow-hover:
        0 16px 36px rgba(92, 79, 69, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
    --theme-cat-nav-bg: linear-gradient(155deg, var(--brand-accent-light) 0%, var(--brand-accent) 48%, var(--brand-accent-hover) 100%);
    --theme-cat-nav-bg-prd1: linear-gradient(155deg, var(--brand-accent-pale) 0%, var(--brand-accent-soft) 45%, #9A7B60 100%);
    --theme-cat-nav-bg-prd2: linear-gradient(155deg, var(--brand-accent-lighter) 0%, var(--brand-accent) 48%, #876E58 100%);
    --theme-cat-nav-bg-prd3: linear-gradient(155deg, var(--brand-accent-soft) 0%, var(--brand-accent-hover) 50%, var(--brand-ink) 100%);
    --theme-cat-nav-bg-prd4: linear-gradient(155deg, var(--brand-accent-light) 0%, var(--brand-accent) 40%, #6E5A4A 100%);

    /* Layout */
    --theme-focus-ring: 0 0 0 3px rgba(166, 138, 115, 0.35);
    --theme-radius-sm: 12px;
    --theme-radius-md: 20px;
    --theme-radius-lg: 24px;
    --theme-radius-pill: 50px;
    --theme-transition: 0.28s ease;
    --theme-font-display: 'Cormorant Garamond', Georgia, serif;
    --theme-font-body: 'Manrope', system-ui, sans-serif;

    /* Typography scale */
    --theme-text-xs: 0.75625rem; /* was 0.6875 +10% */
    --theme-text-sm: 0.89375rem; /* was 0.8125 +10% */
    --theme-text-base: 1.1rem; /* was 1rem +10% */
    --theme-text-md: 1.16875rem; /* was 1.0625 +10% */
    --theme-text-lg: clamp(1.32rem, 2.64vw, 1.485rem); /* was 1.2–1.35 +10% */
    --theme-text-xl: clamp(1.65rem, 3.3vw, 2.2rem); /* was 1.5–2 +10% */
    --theme-text-2xl: clamp(2.2rem, 4.4vw, 3.3rem); /* was 2–3 +10% */
    --theme-text-display: clamp(2.475rem, 5.5vw, 3.85rem); /* was 2.25–3.5 +10% */
    --theme-text-hero: clamp(2.42rem, 6.6vw, 4.95rem); /* was 2.2–4.5 +10% */
    --theme-leading-tight: 1.15;
    --theme-leading-snug: 1.25;
    --theme-leading-normal: 1.55;
    --theme-leading-relaxed: 1.65;
    --theme-price-card: clamp(1.43rem, 2.75vw, 1.65rem); /* +10% */
    --theme-price-page: clamp(1.925rem, 4.4vw, 2.42rem); /* +10% */

    /* Layout */
    --theme-container-max: 1320px;
    --theme-container-pad: clamp(16px, 4vw, 45px);

    /* —— Vertical rhythm (SSOT) ——
       Block: space between sections / to bg edges & dividers
       Inner: max gap inside a block (title↔text, text↔cta, etc.) */
    --spacing-block-mobile: 60px;
    --spacing-block-desktop: 90px;
    --spacing-block: var(--spacing-block-mobile);
    --spacing-inner: 30px;
    --section-spacing: var(--spacing-block);
    --content-gap: var(--spacing-inner);
    /* Legacy alias — never 2× block (that caused 180px gaps) */
    --section-gap: var(--spacing-block);
    --theme-section-pad-y: var(--section-spacing);
    --theme-grid-gap: clamp(16px, 3vw, 24px);

    /* Legacy CMS palette bridge */
    --color1-1: 166, 138, 115;
    --color3-1: 143, 115, 94;
    --color4-1: 166, 138, 115;
    --color13-1: 92, 79, 69;
    --button-color-1: 92, 79, 69;
    --button-color-2: 166, 138, 115;
    --form-color-7: 92, 79, 69;
    --form-color-8: 166, 138, 115;
    --default-color-1: 253, 251, 247;
    --default-color-2: 92, 79, 69;
    --default-color-3: 92, 79, 69;
    --default-color-6: 245, 240, 235;
    --default-color-7: 253, 251, 247;
    --default-color-9: 254, 252, 249;
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;

        --brand-cream: #E8E0D8;
        --brand-cream-elevated: #35302C;
        --brand-cream-muted: #322E2B;
        --brand-ink: #E8E0D8;
        --brand-ink-deep: #D6CEC5;
        --brand-ink-darker: #1F1C1A;
        --brand-ink-darkest: #2A2623;
        --brand-accent: #B8997F;
        --brand-accent-hover: #C9AB92;
        --brand-accent-soft: #C9AB92;
        --brand-accent-light: #C4A484;
        --brand-accent-lighter: #C9AB92;
        --brand-accent-pale: #D0B090;

        --theme-bg: #2A2623;
        --theme-bg-elevated: #35302C;
        --theme-bg-muted: #322E2B;
        --theme-bg-subtle: rgba(184, 153, 127, 0.08);
        --theme-bg-overlay: rgba(0, 0, 0, 0.58);
        --theme-bg-hover: rgba(184, 153, 127, 0.14);
        --theme-bg-active: rgba(184, 153, 127, 0.22);

        --theme-text: #E8E0D8;
        --theme-text-muted: rgba(232, 224, 216, 0.72);
        --theme-text-subtle: rgba(232, 224, 216, 0.5);
        --theme-text-inverse: #FDFBF7;
        --theme-text-link: #C9AB92;
        --theme-text-link-hover: #E8E0D8;
        --theme-text-price: #E8E0D8;
        --theme-text-price-sale: #C9AB92;
        --theme-text-price-old: rgba(232, 224, 216, 0.48);
        --theme-text-on-media: #FDFBF7;
        --theme-text-on-media-muted: rgba(253, 251, 247, 0.88);

        --theme-primary: #B8997F;
        --theme-primary-hover: #C9AB92;
        --theme-primary-dark: #D6CEC5;
        --theme-primary-dark-hover: #E8E0D8;
        --theme-secondary: #A68A73;

        --theme-success: #7FA888;
        --theme-warning: #D4B84A;
        --theme-error: #E07070;

        --theme-border: rgba(214, 206, 197, 0.12);
        --theme-border-strong: rgba(214, 206, 197, 0.24);
        --theme-divider: rgba(214, 206, 197, 0.1);
        --theme-border-on-media: rgba(253, 251, 247, 0.35);

        --theme-shadow-sm: 0 6px 24px rgba(0, 0, 0, 0.22);
        --theme-shadow-md: 0 12px 40px rgba(0, 0, 0, 0.3);
        --theme-shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.38);
        --theme-shadow-header: 0 8px 32px rgba(0, 0, 0, 0.38);
        --theme-shadow-ink: 0 12px 40px rgba(0, 0, 0, 0.35);

        --theme-header-bg: rgba(42, 38, 35, 0.94);
        --theme-footer-bg: #1F1C1A;
        --theme-footer-text: rgba(253, 251, 247, 0.88);
        --theme-footer-muted: rgba(253, 251, 247, 0.55);
        --theme-footer-policy: rgba(0, 0, 0, 0.28);
        --theme-nav-hover: rgba(184, 153, 127, 0.16);
        --theme-nav-mobile-bg: #35302C;
        --theme-modal-bg: #35302C;
        --theme-modal-overlay: rgba(0, 0, 0, 0.65);

        --theme-btn-primary-bg: #B8997F;
        --theme-btn-primary-text: #1F1C1A;
        --theme-btn-primary-hover-bg: #D6CEC5;
        --theme-btn-primary-hover-text: #1F1C1A;
        --theme-btn-accent-bg: #A68A73;
        --theme-btn-accent-text: #FDFBF7;
        --theme-btn-accent-hover-bg: #C9AB92;
        --theme-btn-accent-hover-text: #1F1C1A;
        --theme-btn-disabled-bg: rgba(214, 206, 197, 0.1);
        --theme-btn-disabled-text: rgba(232, 224, 216, 0.38);

        --theme-card-bg: #35302C;
        --theme-card-border: rgba(214, 206, 197, 0.1);
        --theme-card-shadow: 0 8px 32px rgba(0, 0, 0, 0.26);
        --theme-card-shadow-hover: 0 18px 48px rgba(0, 0, 0, 0.36);
        --theme-card-media-bg: #2A2623;

        --theme-badge-cat-bg: rgba(53, 48, 44, 0.92);
        --theme-badge-cat-text: #C9AB92;
        --theme-badge-sale-bg: #B8997F;
        --theme-badge-sale-text: #1F1C1A;
        --theme-badge-pct-bg: rgba(42, 38, 35, 0.95);
        --theme-badge-pct-text: #E8E0D8;
        --theme-badge-tag-bg: rgba(184, 153, 127, 0.16);
        --theme-badge-tag-text: #C9AB92;

        --theme-input-bg: #322E2B;
        --theme-input-text: #E8E0D8;
        --theme-input-border: rgba(214, 206, 197, 0.18);
        --theme-input-placeholder: rgba(232, 224, 216, 0.4);

        --theme-icon: #E8E0D8;
        --theme-icon-muted: #C9AB92;
        --theme-icon-inverse: #1F1C1A;

        --theme-cart-float-bg: linear-gradient(135deg, #4A4038 0%, #2A2623 100%);
        --theme-cart-float-bg-hover: linear-gradient(135deg, #B8997F 0%, #5C4F45 100%);
        --theme-cart-float-text: #FDFBF7;
        --theme-cart-badge-bg: #B8997F;
        --theme-cart-badge-text: #1F1C1A;

        --theme-hero-text: #FDFBF7;
        --theme-hero-overlay: linear-gradient(135deg, rgba(0, 0, 0, 0.62) 0%, rgba(42, 38, 35, 0.45) 100%);
        --theme-hero-text-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
        --theme-hero-scrim:
            linear-gradient(105deg, rgba(0, 0, 0, 0.72) 0%, rgba(42, 38, 35, 0.4) 42%, rgba(42, 38, 35, 0.12) 100%),
            linear-gradient(0deg, rgba(0, 0, 0, 0.88) 0%, rgba(42, 38, 35, 0.5) 34%, transparent 68%);
        --theme-hero-scrim-mobile:
            linear-gradient(0deg, rgba(0, 0, 0, 0.92) 0%, rgba(42, 38, 35, 0.55) 42%, rgba(42, 38, 35, 0.25) 100%);
        --theme-promo-bg: linear-gradient(135deg, #3D3530 0%, #1F1C1A 100%);
        --theme-promo-text: #FDFBF7;

        --theme-glass-bg: rgba(42, 38, 35, 0.48);
        --theme-glass-border: rgba(232, 224, 216, 0.18);
        --theme-glass-highlight: rgba(255, 255, 255, 0.08);
        --theme-glass-shadow:
            0 14px 40px rgba(0, 0, 0, 0.35),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);

        --theme-cat-nav-text: #FDFBF7;
        --theme-cat-nav-border: rgba(255, 255, 255, 0.22);
        --theme-cat-nav-icon-bg: rgba(253, 251, 247, 0.18);
        --theme-cat-nav-icon-bg-hover: rgba(253, 251, 247, 0.28);
        --theme-cat-nav-bg: linear-gradient(155deg, #C4A484 0%, #B8997F 48%, #8F735E 100%);
        --theme-cat-nav-bg-prd1: linear-gradient(155deg, #D0B090 0%, #B8997F 45%, #9A7B60 100%);
        --theme-cat-nav-bg-prd2: linear-gradient(155deg, #C9AB92 0%, #A68A73 48%, #876E58 100%);
        --theme-cat-nav-bg-prd3: linear-gradient(155deg, #B8997F 0%, #8F735E 50%, #5C4F45 100%);
        --theme-cat-nav-bg-prd4: linear-gradient(155deg, #C4A484 0%, #A68A73 40%, #6E5A4A 100%);

        --theme-focus-ring: 0 0 0 3px rgba(184, 153, 127, 0.42);

        --color1-1: 184, 153, 127;
        --color3-1: 166, 138, 115;
        --color4-1: 184, 153, 127;
        --color13-1: 232, 224, 216;
        --button-color-1: 184, 153, 127;
        --button-color-2: 214, 206, 197;
        --form-color-7: 184, 153, 127;
        --form-color-8: 214, 206, 197;
        --default-color-1: 42, 38, 35;
        --default-color-2: 232, 224, 216;
        --default-color-3: 232, 224, 216;
        --default-color-6: 50, 46, 43;
        --default-color-7: 53, 48, 44;
        --default-color-9: 53, 48, 44;
    }
}

/* Vertical rhythm — desktop block spacing */
@media (min-width: 768px) {
    :root {
        --spacing-block: var(--spacing-block-desktop);
        --section-spacing: var(--spacing-block);
        --section-gap: var(--spacing-block);
        /* --content-gap stays --spacing-inner (30px) on all breakpoints */
    }
}

/* Icons */
icon,
.ms,
.material-symbols-rounded {
    font-family: 'Material Icons', 'Material Symbols Rounded', sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: inherit;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    color: inherit;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none;
    box-shadow: var(--theme-focus-ring);
}