:root {
    /* ============================================
       BREAKPOINTS - Mobile First Approach
       ============================================ */
    --breakpoint-mobile-max: 47.9375rem;  /* 767px - max mobile */
    --breakpoint-tablet-min: 48rem;       /* 768px - tablet start */
    --breakpoint-tablet-max: 63.9375rem;  /* 1023px - max tablet */
    --breakpoint-desktop-min: 64rem;      /* 1024px - desktop start */
    --breakpoint-desktop-lg-min: 80rem;   /* 1280px - large desktop */
    
    /* ============================================
       SPACING
       ============================================ */
    --spacing-xxs-1: 0.375rem; /* 6px */
    --spacing-xxs-2: 0.25rem;  /* 4px */
    --spacing-xxs-3: 0.125rem; /* 2px */
    --spacing-xxs-4: 0.625rem;  /* 10px - small padding/gap */
    --spacing-xxs-5: 0.5625rem; /* 9px - very small padding */
    --spacing-xs: 0.5rem;   /* 8px */
    --spacing-s: 0.75rem;   /* 12px */
    --spacing-m: 1rem;      /* 16px */
    --spacing-lg: 1.25rem;  /* 20px */
    --spacing-xl: 1.5rem;   /* 24px */
    --spacing-xxl: 1.75rem; /* 28px */
    --spacing-xxl-2: 2rem;  /* 32px */
	--spacing-xxl-3: 2.25rem;  /* 36px */
    --spacing-xxl-5: 3rem;  /* 48px */
    --spacing-xxl-6: 3.5rem;  /* 56px */
    
    /* ============================================
       BORDER RADIUS
       ============================================ */
    --border-radius-xs: 0.25rem;   /* 4px */
    --border-radius-s: 0.5rem;   /* 8px */
    --border-radius-sm: 0.75rem; /* 12px */
    --border-radius-m: 1rem;      /* 16px */
    --border-radius-md: 0.625rem; /* 10px - medium border radius */
    --border-radius-sm-alt: 0.4375rem; /* 7px - alternative small border radius */
    --border-radius-lg: 1.25rem;  /* 20px */
    --border-radius-xl: 1.5rem;   /* 24px */
    --border-radius-2xl: 2rem;    /* 32px */
    --border-radius-full: 50%;
    --border-radius-pill: 12.5rem; /* 200px - pill shape */

    /* Nested hero in consumer-layout__content: R_outer = R_inner + padding */
    --layout-content-nested-padding: var(--spacing-lg); /* 1.25rem */
    --layout-content-nested-radius-inner: var(--border-radius-lg); /* 1.25rem */
    --layout-content-nested-radius-outer: calc(var(--layout-content-nested-radius-inner) + var(--layout-content-nested-padding)); /* 2.5rem */
    
    /* ============================================
       BORDER & OUTLINE WIDTHS
       ============================================ */
    --border-width-thin: 0.0625rem;  /* 1px - thin borders and outlines */
    --border-width-base: 0.125rem;   /* 2px - base/standard borders */
    --border-width-medium: 0.1875rem; /* 3px - medium borders */
    --border-width-thick: 0.25rem;   /* 4px - thick borders */
    
    /* ============================================
       COLORS
       ============================================ */
    --primary-color: #68708F; /* Neutral default - will be overridden by theme service */
    --primary-color-200: color-mix(in oklch, var(--primary-color) 20%, white);
    --primary-color-600: color-mix(in srgb, var(--primary-color) 70%, transparent);
    --primary-color-700: color-mix(in srgb, color-mix(in srgb, var(--primary-color), black 25%) 70%, transparent);
    --primary-color-light: color-mix(in srgb, var(--primary-color) 8%, white);
    --primary-color-bright: color-mix(in oklch, var(--primary-color) 70%, white);
    --primary-color-hover: color-mix(in srgb, var(--primary-color) 15%, white); /* Hover background tint */
    --primary-color-dark: color-mix(in srgb, var(--primary-color) 90%, black); /* Dark hover state */
    --primary-color-100: color-mix(in oklch, var(--primary-color) 15%, white);
    /* Tokens for component mixes (kept here so old WebViews can override via set-primary-color.js) */
    --primary-color-alpha-20: color-mix(in srgb, var(--primary-color) 20%, transparent);
    --primary-color-alpha-30: color-mix(in srgb, var(--primary-color) 30%, transparent);
    --primary-color-on-border-light: color-mix(in srgb, var(--primary-color) 35%, var(--border-light));
    --primary-color-on-border-highlight: color-mix(in srgb, var(--primary-color) 35%, var(--border-highlight));
    --primary-color-d20: color-mix(in srgb, var(--primary-color), black 20%);
    --primary-color-d36: color-mix(in srgb, var(--primary-color), black 36%);
    --primary-color-d52: color-mix(in srgb, var(--primary-color), black 52%);
    --primary-color-l8: color-mix(in srgb, var(--primary-color), white 8%);
    /* Availability lane detail tints (overridden per element via set-primary-color.js on old WebViews) */
    --lane-available-bg: var(--primary-color-hover);
    --lane-available-fg: var(--primary-color-d52);
    
    --color-text-primary: #000000;
    --color-text-secondary: #666666;
    --color-background-neutral-light: #f3f3f3;
    --color-background-white: #FFFFFF;
    
    --color-status-error: #F21010;
	--color-status-error-50: #FFF1F1;
    --color-status-error-500: #FF2F2F;
    --color-status-error-600: #F21010;
    --color-status-error-700: #E10A0A;
	--color-status-success-50: #F2FBF4;
    --color-status-success-500: #31A354;
	--color-status-success-600: #279247;
	--color-status-success-900: #1B4C2C;
    --color-status-neutral-0: #FCFCFC;
    --color-status-neutral-50: #F2F3F5;
	--color-status-neutral-100: #E7E8ED;
    --color-status-neutral-200: #D3D5DE;
    --color-status-neutral-300: #B1B6C8;
    --color-status-neutral-400: #878FA9;
    --color-status-neutral-500: #68708F;
    --color-status-neutral-600: #5A6180;
	--color-status-warning-50: #FFF4E5;
	--color-status-warning-500: #FCB72E;
	--color-status-warning-600: #E29300;
	--color-status-warning-700: #BB6802;
	--color-status-info-500: #01AEC7;
	--color-status-info-600: #0093CC;
	
    --border-default: #D3D5DE;
    --border-light: #E7E8ED;
    --border-invert: #FCFCFC;
    --border-highlight: #B1B6C8;
	--border-neutral-highlight: #B1B6C8;
    
    --background: #F6F6F6;
    --background-neutral-light: #FCFCFC;
    --background-neutral-light-1: #F3F3F3;
    --background-neutral-light-20: #FAFAFA;
    --background-neutral-light-50: #F2F3F5;
	--background-neutral-light-75: #E8E8E8;
	--background-neutral-light-100: #E7E8ED;
	--background-neutral-dark-20: #B1B6C8;
	--background-neutral-dark-50: #68708F;
	--background-neutral-dark-100: #444960;

    --text-regular-default: #343646;
    --text-regular-secondary: #5A6180;
    --text-regular-tertiary: #878FA9;
    --text-regular-disabled: #D3D5DE;
    --text-regular-invert: #FCFCFC;
	--text-status-error: #F21010;

	--icon-regular-disabled: #D3D5DE;
	--icon-regular-invert: #FCFCFC;
	--icon-regular-tertiary: #878FA9;
	--icon-status-warning: #E29300;

	/* Unified disabled appearance for buttons and button-like controls */
	--button-disabled-border: var(--border-width-thin) solid var(--border-default);
	--button-disabled-background: var(--background-neutral-light);
	--button-disabled-color: var(--text-regular-disabled);
	/* Secondary variant: neutral dismiss / paired actions (see ButtonVariant.Secondary) */
	--button-secondary-background: var(--color-background-white);
	--button-secondary-border: var(--border-width-thin) solid var(--border-highlight);
	--button-secondary-color: var(--text-regular-secondary);
	
    /* ============================================
       SHADOWS
       ============================================ */
    --shadow-xs: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.05); /* 0 1px 2px */
    --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.10); /* 0 2px 4px */
    --shadow-md: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.10); /* 0 4px 12px */
    --shadow-lg: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15); /* 0 8px 24px */
    --shadow-xl: 0 1rem 2.5rem rgba(0, 0, 0, 0.20); /* 0 16px 40px */
    --shadow-card: 0.25rem 0.25rem 1.25rem 0 rgba(0, 0, 0, 0.25); /* 4px 4px 20px 0 */
    --shadow-card-elevated: 0.0625rem -0.0625rem 0.5rem 0.125rem rgba(90, 97, 128, 0.08); /* 1px -1px 8px 2px; #5A6180 @ 8% */

    /* ============================================
       GRADIENTS
       ============================================ */
    --gradient-brand-image-cover: linear-gradient(
        90deg,
        var(--primary-color-600),
        var(--primary-color-700)
    );

    /* ============================================
       TRANSITIONS
       ============================================ */
    --transition-fast: 0.15s ease-in-out;
    --transition-base: 0.2s ease-in-out;
    --transition-slow: 0.3s ease-in-out;
    --transition-slower: 0.5s ease-in-out;
    
    /* ============================================
       FONT SIZES
       ============================================ */
    --font-size-2xs: 0.75rem;    /* 12px */
    --font-size-xs: 0.875rem;   /* 14px */
    --font-size-sm: 0.8125rem;  /* 13px - small text */
    --font-size-body: 1rem;     /* 16px */
    --font-size-md: 1.25rem;    /* 20px - medium headings */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.5rem;     /* 24px */
    --font-size-2xl: 1.75rem;   /* 28px */
    --font-size-3xl: 2rem;      /* 32px */
    
    /* ============================================
       LINE HEIGHTS
       ============================================ */
    --line-height-body: 1.25rem;
    --line-height-normal: 1.5rem;
    --line-height-compact: 1rem;  /* 16px - compact line height */
    --line-height-tight: 0.625rem; /* 10px - very tight line height */
    
    /* ============================================
       FONT FAMILY
       ============================================ */
    --font-family: 'Inter', sans-serif;
    
    /* ============================================
       Z-INDEX SCALE
       ============================================ */
    --z-index-base: 0;
	--z-index-overlay: 1;
    --z-index-dropdown: 1000;
    --z-index-sticky: 1020;
    --z-index-fixed: 1030;
    --z-index-modal-backdrop: 1040;
    --z-index-modal: 1050;
    --z-index-popover: 1060;
    --z-index-tooltip: 1070;
    
    /* ============================================
       COMPONENT SIZES
       ============================================ */
    --button-height: 2.75rem;       /* 44px - standard button height */
    --input-height: 2.5rem;          /* 40px - standard input height */
    --icon-size-sm: 1rem;            /* 16px - small icons/spinners */
    --icon-size-md: 1.5rem;          /* 24px - medium icons */
    --icon-size-lg: 2rem;            /* 32px - large icons */
    --icon-size-xl: 6rem;            /* 96px - extra large icons (modal icons) */
    --icon-size-2xl: 2.5rem;         /* 40px - extra large icons (desktop avatars) */
    
    /* ============================================
       CARD SIZES
       ============================================ */
    --card-width-sm: 10rem;          /* 160px - small card width (mobile) */
    --card-width-sm-desktop: 12.6875rem; /* 203px - small card width (desktop/tablet) */
    --card-height-sm: 12.5rem;      /* 200px - small card height */
    --card-width-md: 14.5rem;        /* 232px - medium card width */
    --card-grid-min-width: 18.35rem; /* min width for responsive card grids */
    --card-height-md: 18.5rem;      /* 296px - medium card height (use px on mobile to avoid iOS rem inflation) */
    --card-width-lg: 18.8rem;        /* 300.8px - large card width */
    --card-height-lg: 22rem;        /* 352px - large card height */
    --card-content-height: 8.25rem;  /* 132px - card content area height */
    
    /* ============================================
       COMPONENT HEIGHTS
       ============================================ */
    --height-button-compact: 1.875rem;  /* 30px - compact button height */
    --height-info-row: 2.625rem;        /* 42px - info row height */
    --height-video-mobile: 15rem;       /* 240px - video height on mobile */
    --height-video-desktop: 20rem;      /* 320px - video height on desktop */
    --height-hero-desktop: 8.625rem;     /* 138px - hero section height on desktop */
    
    /* ============================================
       EMPTY STATE SIZES
       ============================================ */
    --empty-state-icon-size: 7.5rem;    /* 120px - empty state icon size */
    
    /* ============================================
       MODAL SIZES
       ============================================ */
    --modal-height-mobile: 23.1875rem;  /* 371px - mobile modal height */
    --modal-width-desktop: 45rem;       /* 720px - desktop modal width (class/activity/create-account); margin-left = half for centering */
    --modal-width-desktop-add-dependent: 48rem;  /* 768px - Add Dependent modal; margin-left = half for centering */
    --modal-padding-mobile: 1.5rem;       /* 24px - mobile modal padding */
    --modal-padding-desktop: 7.5rem;    /* 120px - desktop modal padding */
    --modal-backdrop-opacity: 0.55;     /* backdrop opacity */
    --modal-backdrop-color: rgba(0, 0, 0, var(--modal-backdrop-opacity));
    /* Modal heights — edit here.
       NOTE: mobile bottom sheets are NOT capped by a var; their height is a calc in
       BottomSheetShell.razor.css (viewport height minus a small gap above the top nav bar). */
    --base-modal-max-height: 95vh;            /* BaseModal centered dialogs (mobile + desktop) */
    --bottom-sheet-max-height-desktop: 95vh;  /* BottomSheetShell sheets (desktop) */
    
    /* ============================================
       TYPOGRAPHY - MODAL
       ============================================ */
    --font-size-modal-title: 1.625rem;  /* 26px - modal title */
    --line-height-modal-title: 2.25rem;  /* 36px - modal title line height */
    
    /* ============================================
       TRANSITIONS - MODAL
       ============================================ */
    --transition-modal: 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);  /* modal animation */
    --transition-backdrop: 0.25s ease;  /* backdrop fade */
    
    /* ============================================
       DATE SELECTOR SIZES
       ============================================ */
    --date-selector-item-width: 3.445rem;  /* 55.12px - date item width */
    --date-selector-calendar-width: 2.25rem; /* 36px - calendar button width */
    
    /* ============================================
       ACCESSIBILITY
       ============================================ */
    --focus-outline-width: var(--border-width-thin);
    --focus-outline-offset: var(--border-width-thin);
    --focus-outline-color: currentColor;
    --touch-target-min: 2.75rem; /* 44px - minimum touch target size */
    
    /* ============================================
       SCROLLBAR SIZES
       ============================================ */
    --scrollbar-width: 0.5rem;         /* 8px - scrollbar width */
    
    /* ============================================
       SAFE AREA INSETS
       ============================================ */
    --safe-area-inset-top: env(safe-area-inset-top, 0px); /* safe area inset for top (notch/status bar) */
    --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px); /* safe area inset for bottom (home indicator/navigation bar) */
    --footer-safe-area-padding-bottom: max(var(--safe-area-inset-bottom), var(--spacing-m)); /* modal/footer bottom padding: at least spacing-m, or safe-area when larger */
    
    /* ============================================
       DECOR (shared data URLs, e.g. ::before top-right content corner)
       ============================================ */
    --decor-content-corner-tr-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M16 16H0C8.83655 16 16 8.83655 16 0V16Z' fill='%23FCFCFC'/%3E%3C/svg%3E");
    
    /* ============================================
       LAYOUT DIMENSIONS
       ============================================ */
    /* Mobile browsers: 100vh includes area under URL bar; dvh matches visible viewport */
    --viewport-available-height: 100vh;
    --viewport-available-height: 100dvh;
    --nav-menu-width: 17.5rem;         /* 280px - desktop navigation menu width */
    --tab-bar-height: 3.75rem;          /* 60px - mobile tab bar height */
    --top-nav-bar-height: calc(var(--safe-area-inset-top) + 3rem); /* top nav bar total height including safe area */
}

@supports (background: color-mix(in srgb, black 50%, transparent)) {
    :root {
        --modal-backdrop-color: color-mix(in srgb, black calc(var(--modal-backdrop-opacity) * 100%), transparent);
    }
}