/* ===================================================================
 * MMOSO design tokens (site-wide)
 * Spacing / radius / control sizes use 4px base grid
 * =================================================================== */
:root {
    /* Brand — unified site blue */
    --mmoso-color-primary-alt: #185ebb;
    --mmoso-color-primary-hover: #25558d;
    --mmoso-color-focus-ring: rgba(0, 123, 255, 0.25);
    --mmoso-color-input-focus: #80bdff;
    --mmoso-color-price:#DB1010;
    --mmoso-color-green:#1D7E22;

    /* Neutrals */
    --mmoso-color-white: #fff;
    --mmoso-color-text: #333;
    --mmoso-color-text-secondary: #444;
    --mmoso-color-text-dark: #222;
    --mmoso-color-text-muted: #666;
    --mmoso-color-muted: #999;
    --mmoso-color-border: #c5cdd8;

    /* Semantic */
    --mmoso-color-text-light: #e5e5e5;
    --mmoso-color-text-gray: #757575;
    --mmoso-color-text-body: #464646;
    --mmoso-color-social-facebook: #3b579d;

    /* Surfaces */
    --mmoso-color-surface: #fff;
    --mmoso-color-surface-muted: #ebeef7;
    --mmoso-color-surface-page: #e6eaf8;
    --mmoso-color-surface-active: #e8f0fb;
    --mmoso-color-surface-inactive: #e8ecf2;
    --mmoso-color-surface-soft: #f4f4f4;
    --mmoso-color-surface-blue: #ecf3fb;
    --mmoso-color-surface-blue-light: #deeaf9;
    --mmoso-color-surface-frost: #f0f9ff;
    --mmoso-color-surface-bright: #fbfdff;
    --mmoso-color-overlay-light: rgba(0, 0, 0, 0.06);
    --mmoso-color-overlay-hover: rgba(0, 0, 0, 0.1);


    /* Spacing — 4px grid */
    --mmoso-space-0: 0;
    --mmoso-space-1: 4px;
    --mmoso-space-2: 8px;
    --mmoso-space-3: 12px;
    --mmoso-space-4: 16px;
    --mmoso-space-5: 20px;
    --mmoso-space-6: 24px;
    --mmoso-space-8: 32px;
    --mmoso-space-10: 40px;
    --mmoso-space-12: 48px;
    --mmoso-space-14: 56px;

    /* Radius — 4px grid */
    --mmoso-radius-sm: 4px;
    --mmoso-radius-md: 8px;
    --mmoso-radius-lg: 12px;

    /* Typography */
    --mmoso-font-size-xs: 12px;
    --mmoso-font-size-sm: 14px;
    --mmoso-font-size-md: 16px;
    --mmoso-font-size-lg: 20px;
    --mmoso-line-height-sm: 24px;
    --mmoso-line-height-md: 24px;

    /* Control sizes — 4px grid */
    --mmoso-control-height-sm: 32px;
    --mmoso-control-height-md: 36px;
    --mmoso-control-height-lg: 40px;
    --mmoso-control-height-bar: 56px;

    /* Shadows */
    --mmoso-shadow-card: 0 0 4px 0 rgba(51, 51, 51, 0.15);
    --mmoso-shadow-card-soft: 0 0 2px 1px rgba(51, 51, 51, 0.15);
    --mmoso-shadow-dropdown: 0 4px 8px rgba(63, 145, 219, 0.16);
    --mmoso-shadow-dropdown-strong: 0 4px 8px rgba(63, 145, 219, 0.36);
    --mmoso-shadow-focus: 0 0 0 4px var(--mmoso-color-focus-ring);

    /* Z-index */
    --mmoso-z-dropdown: 99;
}