:root {
    --min-screen-width: var(--cf-min-screen-width, 320px);
    --max-screen-width: var(--cf-max-screen-width, 1440px);

    /* Brand */
    --brand-primary: var(--cf-brand-primary, #C8864A);
    --brand-subtle: var(--cf-brand-subtle, #f5e6d8);
    --background-page: var(--cf-background-page, #FFFFFF);
    --background-section: var(--cf-background-section, #F8F7F4);
    --background-inverse: var(--cf-background-inverse, #1A1A1A);
    --background-inverse-hover: var(--cf-background-inverse-hover, #2E2E2E);
    --text-primary: var(--cf-text-primary, #1A1A1A);
    --text-secondary: var(--cf-text-secondary, #6b6b6b);
    --text-inverse: var(--cf-text-inverse, #ffffff);
    --text-inverse-soft: var(--cf-text-inverse-soft, #F0ECE8);
    --neutral-border: var(--cf-neutral-border, #EBEBEB);
    --status-sale: var(--cf-status-sale, #b85c38);

    /* Fonts */
    --font-body: var(--cf-font-body, "Inter", sans-serif);
    --font-heading: var(--cf-font-heading, "Playfair Display", serif);

    /* Layout foundation */
    --container-max: var(--cf-container-max, 1440px);

    /* Space scale */
    --space-2xs: var(--cf-space-2xs, clamp(0.5rem, 0.46rem + 0.12vw, 0.65rem));
    --space-xs: var(--cf-space-xs, clamp(0.75rem, 0.66rem + 0.26vw, 1rem));
    --space-s: var(--cf-space-s, clamp(1rem, 0.86rem + 0.45vw, 1.35rem));
    --space-m: var(--cf-space-m, clamp(1.25rem, 1.05rem + 0.7vw, 1.9rem));
    --space-l: var(--cf-space-l, clamp(1.75rem, 1.35rem + 1.3vw, 2.8rem));
    --space-xl: var(--cf-space-xl, clamp(2.5rem, 1.8rem + 2vw, 4.2rem));
    --space-2xl: var(--cf-space-2xl, clamp(3rem, 2rem + 3vw, 5.8rem));

    /* Header foundation */
    --space-header-inline: var(--cf-space-header-inline, clamp(1rem, 4vw, 5rem));
    --space-header-nav-gap: var(--cf-space-header-nav-gap, clamp(18px, 2.4vw, 34px));
    --size-header-logo-width: var(--cf-size-header-logo-width, clamp(10rem, 13vw, 16rem));

    /* Type scale foundation */
    --text-xs: var(--cf-text-xs, clamp(0.72rem, 0.7rem + 0.08vw, 0.78rem));
    --text-s: var(--cf-text-s, clamp(0.82rem, 0.8rem + 0.1vw, 0.9rem));
    --text-m: var(--cf-text-m, clamp(1rem, 0.96rem + 0.14vw, 1.0625rem));
    --text-l: var(--cf-text-l, clamp(1.05rem, 0.96rem + 0.4vw, 1.25rem));
    --text-xl: var(--cf-text-xl, clamp(1.35rem, 1.1rem + 0.9vw, 1.9rem));
    --text-2xl: var(--cf-text-2xl, clamp(1.8rem, 1.35rem + 1.5vw, 2.8rem));

    /* Layout semantic */
    --layout-page-inline: var(--cf-layout-page-inline, clamp(20px, 4vw, 80px));
    --layout-page-shell-space: var(--cf-layout-page-shell-space, clamp(20px, 3vw, 28px));
    --layout-page-shell-gap: var(--cf-layout-page-shell-gap, clamp(24px, 4vw, 40px));
    --layout-site-main-offset: var(--cf-layout-site-main-offset, calc(var(--header-height) + 40px));
    --layout-footer-margin-top: var(--cf-layout-footer-margin-top, clamp(40px, 8vw, 80px));
    --layout-footer-space-y: var(--cf-layout-footer-space-y, 24px);

    /* Header semantic */
    --header-height: var(--cf-header-height, 68px);
    --header-inline-padding: var(--cf-header-inline-padding, var(--space-header-inline));
    --header-inner-gap: var(--cf-header-inner-gap, clamp(12px, 2vw, 24px));
    --header-actions-gap: var(--cf-header-actions-gap, clamp(2px, 0.4vw, 4px));
    --header-nav-gap: var(--cf-header-nav-gap, var(--space-header-nav-gap));
    --header-logo-width: var(--cf-header-logo-width, var(--size-header-logo-width));
    --header-logo-fallback-size: var(--cf-header-logo-fallback-size, clamp(1.35rem, 0.8rem + 1.2vw, 1.55rem));
    --header-nav-font-size: var(--cf-header-nav-font-size, clamp(0.82rem, 0.7rem + 0.2vw, 0.875rem));
    --header-icon-button-size: var(--cf-header-icon-button-size, 40px);
    --header-icon-size: var(--cf-header-icon-size, 20px);
    --header-divider-margin: var(--cf-header-divider-margin, clamp(4px, 1vw, 8px));
    --cart-badge-size: var(--cf-cart-badge-size, 0.62rem);

    /* Cart semantic */
    --cart-action-text-size: var(--cf-cart-action-text-size, 0.9375rem);
    --cart-action-text-weight: var(--cf-cart-action-text-weight, 700);
    --cart-action-text-line-height: var(--cf-cart-action-text-line-height, 1.2);

    /* Page semantic */
    --page-title-size: var(--cf-page-title-size, clamp(1.7rem, 1rem + 2.5vw, 2.4rem));
    --page-item-title-size: var(--cf-page-item-title-size, clamp(1.2rem, 0.9rem + 1vw, 1.6rem));
    --page-copy-size: var(--cf-page-copy-size, var(--text-m));
    --footer-copy-size: var(--cf-footer-copy-size, 0.9rem);

    /* Account semantic */
    --login-logo-width: var(--cf-login-logo-width, 220px);

    /* Footer semantic - size tokens from Core Framework */
    --footer-logo-width: var(--cf-footer-logo-width, var(--header-logo-width));
    --footer-brand-max-width: var(--cf-footer-brand-max-width, 480px);
    --footer-brand-max-width-tablet: var(--cf-footer-brand-max-width-tablet, 576px);
    --footer-newsletter-form-min-width: var(--cf-footer-newsletter-form-min-width, 288px);
    --footer-newsletter-form-max-width: var(--cf-footer-newsletter-form-max-width, 416px);
    --footer-icon-size: var(--cf-footer-icon-size, 16px);
    --footer-newsletter-rule-width: var(--cf-footer-newsletter-rule-width, 24px);
    --footer-heading-rule-width: var(--cf-footer-heading-rule-width, 18px);
    --footer-rule-thickness: var(--cf-footer-rule-thickness, 1.5px);
    --footer-newsletter-submit-icon-size: var(--cf-footer-newsletter-submit-icon-size, 14px);
    --footer-border-width: var(--cf-footer-border-width, 1px);

    /* Footer semantic - derived from existing theme colors only */
    --footer-social-surface: color-mix(in srgb, var(--text-inverse-soft) 4%, transparent);
    --footer-social-border: color-mix(in srgb, var(--text-inverse-soft) 14%, transparent);
    --footer-divider: color-mix(in srgb, var(--text-inverse-soft) 12%, transparent);

    /* Mobile semantic */
    --mobile-panel-padding-top: var(--cf-mobile-panel-padding-top, clamp(16px, 3vw, 24px));
    --mobile-panel-padding-bottom: var(--cf-mobile-panel-padding-bottom, clamp(20px, 4vw, 32px));
    --mobile-section-label-size: var(--cf-mobile-section-label-size, 0.66rem);
    --mobile-nav-font-size: var(--cf-mobile-nav-font-size, 1rem);

    /* Search semantic */
    --search-panel-max-width: var(--cf-search-panel-max-width, 920px);
    --search-panel-padding-top: var(--cf-search-panel-padding-top, clamp(20px, 3vw, 32px));
    --search-panel-padding-bottom: var(--cf-search-panel-padding-bottom, clamp(28px, 4vw, 42px));
    --search-input-wrap-padding-y: var(--cf-search-input-wrap-padding-y, clamp(10px, 1.2vw, 14px));
    --search-input-wrap-gap: var(--cf-search-input-wrap-gap, clamp(8px, 1.5vw, 16px));
    --search-icon-size: var(--cf-search-icon-size, clamp(20px, 2.4vw, 24px));
    --search-input-size: var(--cf-search-input-size, clamp(1.15rem, 0.8rem + 1.6vw, 1.8rem));
    --search-close-size: var(--cf-search-close-size, 0.78rem);
    --search-esc-size: var(--cf-search-esc-size, 0.7rem);
    --search-section-title-size: var(--cf-search-section-title-size, 0.7rem);
    --search-recent-size: var(--cf-search-recent-size, 0.88rem);
    --search-popular-size: var(--cf-search-popular-size, 0.82rem);
    --search-result-label-size: var(--cf-search-result-label-size, 0.66rem);
    --search-result-title-size: var(--cf-search-result-title-size, 1rem);
    --search-result-meta-size: var(--cf-search-result-meta-size, 0.82rem);
    --search-empty-title-size: var(--cf-search-empty-title-size, 1.25rem);
    --search-empty-copy-size: var(--cf-search-empty-copy-size, 0.9rem);

    /* Radius */
    --radius-xs: var(--cf-radius-xs, 4px);
    --radius-s: var(--cf-radius-s, 8px);
    --radius-m: var(--cf-radius-m, 12px);
    --radius-l: var(--cf-radius-l, 20px);
    --radius-xl: var(--cf-radius-xl, 32px);
    --radius-full: var(--cf-radius-full, 999rem);

    /* Shadow */
    --shadow-primary: var(--cf-shadow-primary, rgba(26, 26, 26, 0.08));
    --shadow-xs: var(--cf-shadow-xs, 0 1px 2px var(--shadow-primary));
    --shadow-s: var(--cf-shadow-s, 0 2px 6px var(--shadow-primary));
    --shadow-m: var(--cf-shadow-m, 0 4px 16px var(--shadow-primary));

    /* Motion */
    --transition-fast: var(--cf-transition-fast, 0.2s ease);
    --transition-medium: var(--cf-transition-medium, 0.28s ease);
}
