:root {
    /* Colors */
    --color-primary: #EA2831;
    --color-primary-dark: #c41f27;
    --color-primary-light: #f87171;
    --color-secondary: #1b6ec2;

    /* AI assistant chat UI theme (read by QTLSOFT.AI.Assistant.Blazor; falls back if unset) */
    --qtl-primary: #EA2831;
    --qtl-primary-strong: #c41f27;
    --qtl-primary-text: #ffffff;
    --qtl-accent: #16a34a;
    --color-background: #f8f6f6;
    --color-surface: #fffffff7;
    --color-surface-secondary: #f0f4f8;
    --color-text-primary: #121417;
    --color-text-secondary: #515e71;
    --color-text-muted: #94a3b8;
    --color-success: #16a34a;
    --color-warning: #F59E0B;
    --color-danger: #dc2626;
    --color-info: #3b82f6;
    --color-border: #e5e7eb;
    --color-border-light: #f1f5f9;
    /* Typography */
    --font-family-primary: 'Inter', sans-serif;
    --font-family-secondary: 'Material Symbols Outlined', sans-serif;
    --font-size-xs: 11.5px;
    --font-size-sm: 13px;
    --font-size-base: 14px;
    --font-size-lg: 15px;
    --font-size-xl: 16px;
    --font-size-2xl: 24px;
    --font-size-3xl: 34px;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --line-height-tight: 1.13;
    --line-height-normal: 1.7;
    --line-height-relaxed: 1.75;
    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;
    --space-2xl: 32px;
    /* Borders */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 14px;
    --radius-pill: 99px;
    --border-color: var(--color-border);
    --border-color-light: var(--color-border-light);
    --border-width: 1px;
    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .06);
    --shadow-md: 0 6px 20px rgba(0, 0, 0, .12);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, .18);
    --shadow-card: 0 8px 28px rgba(0, 0, 0, .09);
    --shadow-dropdown: 0 4px 12px rgba(234, 40, 49, .25);
    --shadow-modal: 0 16px 40px rgba(0, 0, 0, .4);
    /* Component tokens */
    --button-primary-bg: var(--color-primary);
    --button-primary-outline-bg: color-mix(in srgb, var(--color-primary) 4%, white);
    --button-primary-text: var(--color-surface);
    --button-primary-border: none;
    --button-primary-radius: var(--radius-pill);
    --button-primary-padding: 11px 20px;
    --button-primary-weight: var(--font-weight-bold);
    --button-primary-hover-bg: var(--color-primary-dark);
    --button-primary-hover-shadow: 0 6px 20px rgba(234, 40, 49, .3);
    --button-secondary-bg: #1b6ec2;
    --button-secondary-text: var(--color-surface);
    --button-secondary-outline-bg: color-mix(in srgb, var(--color-secondary) 4%, white);
    --button-secondary-border: 1.5px solid var(--color-border);
    --button-secondary-radius: 9px;
    --button-secondary-padding: 12px 24px;
    --button-ghost-bg: transparent;
    --button-ghost-text: var(--color-text-primary);
    --button-ghost-border: none;
    --button-ghost-radius: var(--radius-md);
    --button-ghost-padding: 8px 16px;
    --card-bg: var(--color-surface);
    --card-border: 1px solid var(--color-border);
    --card-radius: 2px;
    --card-shadow: 0 1px 4px rgba(0, 0, 0, .06);
    --card-padding: var(--space-xl);
    --stat-card-bg: var(--color-surface);
    --stat-card-border: 1px solid var(--color-border);
    --stat-card-radius: 2px;
    --stat-card-shadow: var(--shadow-sm);
    --stat-card-padding: var(--space-md);
    --stat-card-value-size: var(--font-size-2xl);
    --stat-card-value-weight: 900;
    --stat-card-label-size: 12px;
    --stat-card-label-color: var(--color-text-secondary);
    --input-bg: var(--color-surface);
    --input-border: 1.5px solid var(--color-border);
    --input-radius: var(--radius-md);
    --input-padding: 10px 12px;
    --input-size: 13.5px;
    --input-focus-border: var(--color-primary);
    --input-focus-shadow: 0 0 0 3px rgba(234, 40, 49, .1);
    --input-placeholder: var(--color-text-secondary);
    --badge-radius: var(--radius-pill);
    --badge-padding: 3px 12px;
    --badge-size: var(--font-size-xs);
    --badge-weight: var(--font-weight-bold);
    --nav-item-active-color: var(--color-primary);
    --nav-item-inactive-color: var(--color-text-primary);
    --nav-item-active-bg: #fff1f2;
    --nav-item-active-indicator: none;
    --table-row-border-bottom: 1px solid var(--color-border);
    --table-row-hover-bg: #f8f9fa;
    --table-row-padding: 11px 0;
    /* Mobile base */
    --mobile-bottom-nav-height: 64px;
    --mobile-bottom-nav-background: var(--color-surface);
    --mobile-bottom-nav-border-top: 1px solid var(--color-border);
    --mobile-bottom-nav-active-color: var(--color-primary);
    --mobile-bottom-nav-inactive-color: var(--color-text-secondary);
    --mobile-content-padding: 16px;
    --mobile-content-padding-bottom: 80px;
    --mobile-card-margin-bottom: 12px;
    --mobile-tap-target-min: 34px;
    --mobile-list-item-height: 64px;
    /* Mobile patterns: page layout */
    --mobile-top-bar-height: 56px;
    --mobile-top-bar-title-weight: 600;
    --mobile-top-bar-title-size: 17px;
    --mobile-tab-indicator-height: 2px;
    --mobile-tab-padding: 12px 16px;
    --mobile-bottom-nav-icon-size: 24px;
    --mobile-bottom-nav-label-size: 11px;
    --mobile-bottom-nav-label-margin-top: 4px;
    --mobile-bottom-nav-item-count: 5;
    /* Mobile patterns: stat card */
    --mobile-stat-card-symbol-size: 14px;
    --mobile-stat-card-value-size: 28px;
    --mobile-stat-card-value-weight: 700;
    --mobile-stat-card-label-size: 12px;
    --mobile-stat-card-label-color: var(--color-text-muted);
    --mobile-stat-card-change-size: 12px;
    /* Mobile patterns: chart section */
    --mobile-chart-height: 200px;
    --mobile-chart-value-size: 24px;
    --mobile-chart-active-bar: var(--color-primary);
    --mobile-chart-inactive-bar: rgba(234, 40, 49, .3);
    /* Mobile patterns: list item */
    --mobile-list-item-min-height: 72px;
    --mobile-list-thumbnail-size: 48px;
    --mobile-list-thumbnail-radius: var(--radius-md);
    --mobile-list-title-size: 15px;
    --mobile-list-title-weight: 500;
    --mobile-list-subtitle-size: 12px;
    --mobile-list-price-size: 15px;
    --mobile-list-price-weight: 600;
    /* Mobile patterns: status badges */
    --mobile-status-padding: 4px 10px;
    --mobile-status-size: 12px;
    --mobile-status-weight: 500;
    --mobile-status-pending-bg: #fee2e2;
    --mobile-status-pending-text: var(--color-danger);
    --mobile-status-shipped-bg: #dbeafe;
    --mobile-status-shipped-text: var(--color-info);
    --mobile-status-delivered-bg: #dcfce7;
    --mobile-status-delivered-text: var(--color-success);
    --mobile-status-cancelled-bg: var(--color-border-light);
    --mobile-status-cancelled-text: var(--color-text-muted);
    /* Mobile patterns: filter tabs */
    --mobile-filter-padding: 8px 16px;
    --mobile-filter-size: 14px;
    --mobile-filter-weight-active: 600;
    --mobile-filter-weight-inactive: 400;
    --mobile-filter-indicator: 2px;
    /* Mobile patterns: settings */
    --mobile-settings-row-height: 56px;
    --mobile-settings-label-size: 15px;
    --mobile-toggle-width: 44px;
    --mobile-toggle-height: 26px;
    --mobile-toggle-thumb-size: 22px;
    /* Mobile patterns: detail page */
    --mobile-detail-section-size: 17px;
    --mobile-detail-section-weight: 600;
    --mobile-detail-section-margin-bottom: 12px;
    --mobile-detail-label-size: 12px;
    --mobile-detail-label-color: var(--color-text-muted);
    --mobile-detail-value-size: 15px;
    --mobile-detail-value-weight: 500;
    --mobile-detail-row-padding: 12px 0;
    --mud-palette-secondary: #f44336 !important;
    /* Mobile patterns: subscription card */
    --mobile-subscription-bg: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    --mobile-subscription-text: var(--color-surface);
    --mobile-subscription-radius: var(--radius-xl);
    --mobile-subscription-padding: 20px;
    --mobile-subscription-price-size: 36px;
    --mobile-subscription-period-size: 13px;
    /* Mobile patterns: forms */
    --mobile-form-input-height: 48px;
    --mobile-form-label-size: 13px;
    --mobile-form-label-color: #3e444d;
    --mobile-form-label-margin-bottom: 6px;
    --mobile-form-input-size: 15px;
    --mobile-form-group-margin-bottom: 20px;
    --mobile-form-button-height: 48px;
    /* Mobile patterns: empty state */
    --mobile-empty-icon-size: 64px;
    --mobile-empty-icon-color: var(--color-text-muted);
    --mobile-empty-title-size: 17px;
    --mobile-empty-description-size: 14px;
    --mobile-empty-description-color: var(--color-text-muted);
    /* Transitions */
    --motion-fast: .18s;
    --motion-normal: .2s;
    --motion-slow: .4s;
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 350ms ease;
}