:root {

    /* =========================================================
       Layout Foundation
       ========================================================= */
    --gutter-width: 5vw;
    --space-unit: 1rem;
    --max-width-text: 45em;
    --max-width-wide: 1200px;
    --max-width-article: 790px;

    /* Semantic spacing scale */
    --space-xxxsmall: calc( 0.125 * var(--space-unit, 1em) );
    --space-xxsmall: calc( 0.25 * var(--space-unit, 1em) );
    --space-xsmall: calc( 0.5 * var(--space-unit, 1em) );
    --space-small: calc( 0.75 * var(--space-unit, 1em) );
    --space-normal: var(--space-unit, 1em);
    --space-medium: calc( 1.25 * var(--space-unit, 1em) );
    --space-large: calc( 1.5 * var(--space-unit, 1em) );
    --space-xlarge: calc( 2.5 * var(--space-unit, 1em) );
    --space-xxlarge: calc( 4 * var(--space-unit, 1em) );

    /* Shared radius */
    --border-radius: 3px;
    
     /* =========================================================
         Semantic Color Layer
         ========================================================= */

     /* Surface, text, and brand aliases */
    --color-white: var(--white, #fff);
    --color-black: var(--black, #000);
    --color-surface: var(--color-white);
    --color-surface-subtle: var(--color-neutral-50, #f2f3f4);
    --color-surface-overlay: var(--color-white-alpha-800, rgba(255 255 255 / 0.85));
    --color-text-inverse: var(--color-white);
    --gray-xlight: var(--color-neutral-100, #f8f8f8);
    --gray: var(--color-neutral-200, #bfc1c3);
    --gray-light: var(--color-neutral-300, #dadada);
    --red: var(--color-primary-500, #c81e11);
    --red-dark: var(--color-primary-800, #6d1b25);
    --color-success: var(--color-success-700, #15803d);
    --color-error: var(--color-error-600, #dc2626);
    --color-border-soft: var(--color-neutral-200, #bfc1c3);
    --color-border-muted: var(--color-neutral-300, #dadada);
    --color-overlay-soft: rgba(0, 0, 0, 0.1);
    --color-info: var(--color-information-600, #0046ea);
    --color-info-surface: var(--color-information-50, #e9f0ff);
    --color-brand-facebook: var(--brand-color-facebook, #2d448b);
    --color-brand-twitter: var(--brand-color-twitter, #21a7f3);
    --color-brand-linkedin: var(--brand-color-linkedin, #1364a8);

    /* Feature-level semantic aliases */
    --color-consent-text: var(--color-neutral-800, #333435);
    --color-consent-border: var(--color-consent-text);
    --color-consent-surface: var(--color-warning-100, #f6dcba);
    --color-form-surface: var(--color-surface);
    --color-form-error: var(--color-error);
    --color-form-success: var(--color-success);
    --color-demo-store-surface: var(--color-information-500, #2667ff);

     /* Shadows and interaction effects */
    --box-shadow: var(--shadow-light-200, 0 2px 4px 0 rgba(0,0,0,0.08));
    --shadow-popover: 0 3px 3px rgba(0, 0, 0, 0.2);
    --shadow-accessibility-focus: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    --shadow-selection-soft: 0 0 0 0.25em var(--color-overlay-soft);

     /* Motion and consent layout */
    --space-consent-section: var(--space-medium);
    --space-consent-banner-padding-bottom: var(--space-large);
    --size-consent-checkbox: 25px;
    --transition-base: 0.2s ease;

     /* =========================================================
         Icon Tokens
         ========================================================= */

     /* Canonical ftm glyph catalog (source: assets/fonts/ftm.svg) */
    --icon-ftm-first-tracks: "\e900";
    --icon-ftm-support: "\e904";
    --icon-ftm-search: "\f002";
    --icon-ftm-email: "\f003";
    --icon-ftm-heart: "\f004";
    --icon-ftm-user: "\f007";
    --icon-ftm-check: "\f00c";
    --icon-ftm-close: "\f00d";
    --icon-ftm-search-plus: "\f00e";
    --icon-ftm-play-circle-o: "\f01d";
    --icon-ftm-shopping-cart: "\f07a";
    --icon-ftm-phone: "\f095";
    --icon-ftm-twitter: "\f099";
    --icon-ftm-facebook: "\f09a";
    --icon-ftm-facebook-f: "\f09a";
    --icon-ftm-credit-card: "\f09d";
    --icon-ftm-linkedin: "\f0e1";
    --icon-ftm-angle-left: "\f104";
    --icon-ftm-angle-right: "\f105";
    --icon-ftm-angle-up: "\f106";
    --icon-ftm-angle-down: "\f107";
    --icon-ftm-mobile: "\f10b";
    --icon-ftm-mobile-phone: "\f10b";
    --icon-ftm-calendar: "\f133";
    --icon-ftm-dollar: "\f155";
    --icon-ftm-youtube: "\f167";
    --icon-ftm-instagram: "\f16d";
    --icon-ftm-pinterest: "\f231";
    --icon-ftm-shopping-basket: "\f291";

    /* Canonical WooCommerce icon glyph tokens */
    --icon-wc-spinner: "\e031";
    --icon-wc-checkmark: "\e017";
    --icon-wc-notice-success: "\e015";

}