:root { --sf-c-brand: #1d837b; --sf-c-brandStrong: #137069; --sf-c-secondary: #ff8800; --sf-c-n0: #ffffff; --sf-c-n100: #f3f4f6; --sf-c-n200: #e5e7eb; --sf-c-n300: #868e96; --sf-c-n500: #5f6775; --sf-c-n700: #4b5563; --sf-c-n900: #111827; --sf-c-red100: #fee2e2; --sf-c-red500: #ce0502; --sf-c-red700: #991b1b; --sf-c-green100: #dcfce7; --sf-c-green500: #12883e; --sf-c-green700: #14532d; --sf-c-orange100: #ffedd5; --sf-c-orange500: #f97316; --sf-c-orange700: #c2410c; --sf-c-blue100: #dbeafe; --sf-c-blue500: #0369a1; --sf-c-blue700: #1e40af; --sf-color-primary: var(--sf-c-brand); --sf-color-accent: var(--sf-c-secondary); --sf-color-background: var(--sf-c-n0); --sf-color-surface: var(--sf-c-n100); --sf-color-text: var(--sf-c-n900); --sf-color-text-inverse: var(--sf-c-n0); --sf-color-text-muted: var(--sf-c-n500); --sf-color-border: var(--sf-c-n300); --sf-color-border-hover: var(--sf-c-n700); --sf-color-border-active: var(--sf-c-n900); --sf-color-success: var(--sf-c-green500); --sf-color-danger: var(--sf-c-red500); --sf-color-info: var(--sf-c-blue500); --sf-color-warning: var(--sf-c-orange500); --sf-color-success-surface: var(--sf-c-green100); --sf-color-success-text: var(--sf-c-green700); --sf-color-info-surface: var(--sf-c-blue100); --sf-color-info-text: var(--sf-c-blue700); --sf-color-warning-surface: var(--sf-c-orange100); --sf-color-warning-text: var(--sf-c-orange700); --sf-color-danger-surface: var(--sf-c-red100); --sf-color-danger-text: var(--sf-c-red700); --sf-color-surface-hover: var(--sf-c-n100); --sf-color-overlay: var(--sf-c-n900); --sf-color-surface-active: var(--sf-c-n200); --sf-color-text-link: var(--sf-c-blue500); --sf-color-campaign: var(--sf-c-red500); --sf-color-news: var(--sf-c-blue500); --sf-color-wishlist: var(--sf-c-n900); --sf-color-review: var(--sf-c-n900); --sf-color-in-stock: var(--sf-c-green500); --sf-color-low-stock: var(--sf-c-orange700); --sf-color-out-of-stock: var(--sf-c-red500); --sf-button-primary-bg: var(--sf-color-primary); --sf-button-primary-text: var(--sf-color-text-inverse); --sf-button-primary-border: var(--sf-color-primary); --sf-button-secondary-bg: var(--sf-color-accent); --sf-button-secondary-text: var(--sf-color-text); --sf-button-secondary-border: var(--sf-color-border); --sf-badge-bg: var(--sf-color-campaign); --sf-badge-text: var(--sf-color-text-inverse); --sf-badge-border: var(--sf-color-campaign); --sf-news-badge-bg: var(--sf-color-news); --sf-news-badge-text: var(--sf-color-background); --sf-news-badge-border: var(--sf-color-news); --sf-count-badge-bg: var(--sf-color-text); --sf-count-badge-text: var(--sf-color-text-inverse); --sf-count-badge-border: var(--sf-color-text); --sf-wishlist-icon: var(--sf-color-text-muted); --sf-wishlist-icon-active: var(--sf-color-wishlist); --sf-rating-star: var(--sf-color-text-muted); --sf-rating-star-active: var(--sf-color-review); --sf-price-text: var(--sf-color-text); --sf-price-strikethrough: var(--sf-color-text-muted); --sf-campaign-price: var(--sf-color-text); --sf-campaign-info-bg: var(--sf-color-campaign); --sf-campaign-info-text: var(--sf-color-text-inverse); --sf-gwp-unlocked: var(--sf-color-success); --sf-card-bg: var(--sf-color-background); --sf-card-border: var(--sf-c-n200); --sf-card-overlay-bg: var(--sf-color-background); --sf-dialog-bg: var(--sf-color-background); --sf-panel-bg: var(--sf-color-background); --sf-dropdown-bg: var(--sf-color-background); --sf-tab-border: var(--sf-color-border); --sf-input-bg: var(--sf-color-background); --sf-input-border: var(--sf-color-border); --sf-input-text: var(--sf-color-text); --sf-input-placeholder: var(--sf-color-text-muted); --sf-search-bg: var(--sf-color-surface); --sf-search-border: var(--sf-color-border); --sf-search-text: var(--sf-color-text); --sf-search-placeholder: var(--sf-color-text-muted); --sf-search-button-bg: var(--sf-color-surface); --sf-search-button-text: var(--sf-color-text); --sf-header-bg: var(--sf-c-n900); --sf-header-text: var(--sf-c-n0); --sf-header-border: var(--sf-color-border); --sf-menu-bg: var(--sf-color-background); --sf-menu-text: var(--sf-color-text); --sf-menu-border: var(--sf-color-border); --sf-topbar-bg: var(--sf-color-primary); --sf-topbar-text: var(--sf-color-text-inverse); --sf-footer-bg: var(--sf-color-primary); --sf-footer-text: var(--sf-color-text-inverse); --sf-footer-border: var(--sf-color-border); --sf-bar-bg: var(--sf-color-accent); --sf-bar-text: var(--sf-color-text); --sf-skeleton-bg: var(--sf-color-surface-active); --sf-skeleton-highlight: var(--sf-color-background); --sf-focus-ring: var(--sf-c-blue500); --sf-letter-spacing: 0; --sf-line-height-tight: 1.2; --sf-line-height-normal: 1.5; --sf-line-height-relaxed: 1.75; --sf-font-size-2xs: 0.625rem; --sf-font-size-xs: 0.75rem; --sf-font-size-sm: 0.875rem; --sf-font-size-base: 1rem; --sf-font-size-lg: 1.125rem; --sf-font-size-xl: 1.25rem; --sf-font-size-2xl: 1.5rem; --sf-font-size-3xl: 1.875rem; --sf-font-size-4xl: 2.25rem; --sf-font-size-5xl: 3rem; --sf-border-radius-sm: 0.5rem; --sf-border-radius-md: 0.75rem; --sf-border-radius-lg: 1rem; --sf-border-radius-xl: 1.5rem; --sf-border-radius-none: 0px; --sf-border-radius-full: 9999px; --sf-input-radius: 0.75rem; --sf-search-radius: 1.5rem; --sf-border-width: 1px; --sf-spacing-card-padding: 1rem; --sf-spacing-section-gap: 1.5rem; --sf-spacing-card-gap: 1.5rem; --sf-space-base: 0.25rem; --sf-control-sm: 0.5rem; --sf-control-md: 0.75rem; --sf-control-lg: 1rem; --sf-control-icon-button: 0.5rem; --sf-card-border-width: 1px; --sf-card-radius: 0.75rem; --sf-card-shadow: none; --sf-image-bg: var(--sf-color-surface); --sf-image-fit: contain; --sf-image-radius: 0.5rem; --sf-button-radius: 0.75rem; --sf-buy-button-radius: 0.75rem; --sf-swatch-radius: 9999px; --sf-badge-radius: 9999px; --sf-skeleton-shimmer-name: loading; --sf-skeleton-pulse-name: none; --sf-skeleton-duration: 1.4s; --sf-skeleton-radius: var(--sf-card-radius, 0); --sf-image-aspect-ratio: 1 / 1; --maxwidth-page: 80rem; --maxwidth-header: 80rem; --maxwidth-footer: 100%; --maxwidth-checkout: 80rem; --color-body-primary: var(--sf-body-primary-bg); --color-button-primary: var(--sf-button-primary-bg); --color-button-primary-content: var(--sf-button-primary-text); --color-button-primary-hover: var(--sf-button-primary-bg-hover); --color-campaign: var(--sf-badge-bg); --color-campaign-content: var(--sf-badge-text); --color-campaign-border: var(--sf-badge-border); --color-news: var(--sf-news-badge-bg); --color-news-content: var(--sf-news-badge-text); --color-news-border: var(--sf-news-badge-border); --color-count-badge: var(--sf-count-badge-bg); --color-count-badge-content: var(--sf-count-badge-text); --color-count-badge-border: var(--sf-count-badge-border); --color-dashboard-widget: var(--sf-dashboard-widget-bg); --color-dashboard-widget-border: var(--sf-dashboard-widget-border); --color-wishlist-icon: var(--sf-wishlist-icon); --color-wishlist-icon-active: var(--sf-wishlist-icon-active); --color-rating-star: var(--sf-rating-star); --color-rating-star-active: var(--sf-rating-star-active); --color-price: var(--sf-price-text); --color-price-strikethrough: var(--sf-price-strikethrough); --color-sale-price: var(--sf-campaign-price); --color-campaign-info: var(--sf-campaign-info-bg); --color-campaign-info-content: var(--sf-campaign-info-text); --color-gwp-unlocked: var(--sf-gwp-unlocked); --color-user-content-link: var(--sf-color-text-link); --font-sans: var(--sf-font-family); --color-input-bg: var(--sf-input-bg); --color-input-border: var(--sf-input-border); --color-input-text: var(--sf-input-text); --color-input-placeholder: var(--sf-input-placeholder); --color-card-bg: var(--sf-card-bg); --color-card-border: var(--sf-card-border); --color-dialog-bg: var(--sf-dialog-bg); --color-panel-bg: var(--sf-panel-bg); --color-dropdown-bg: var(--sf-dropdown-bg); --radius: var(--sf-border-radius-sm); --radius-sm: var(--sf-border-radius-sm); --radius-md: var(--sf-border-radius-md); --radius-lg: var(--sf-border-radius-lg); --radius-xl: var(--sf-border-radius-xl); --colors-surface: var(--sf-color-surface); --colors-disabled: var(--sf-color-text-muted); --colors-text-disabled: var(--sf-color-text-muted); --colors-text-light: var(--sf-color-text-muted); --colors-primary-400: var(--sf-color-primary); --colors-success-400: var(--sf-color-success); --colors-error-400: var(--sf-color-danger); --color-header-primary: var(--sf-header-bg); --color-header-primary-content: var(--sf-header-text); --color-menu-bg: var(--sf-menu-bg); --color-menu-text: var(--sf-menu-text); --color-menu-border: var(--sf-menu-border); --color-topbar-primary: var(--sf-topbar-bg); --color-topbar-primary-content: var(--sf-topbar-text); --color-footer-primary: var(--sf-footer-bg); --color-footer-primary-content: var(--sf-footer-text); --color-bar-primary: var(--sf-bar-bg); --color-bar-primary-content: var(--sf-bar-text); --color-base-50: var(--sf-c-n0); --color-base-100: var(--sf-c-n0); --color-base-200: var(--sf-c-n100); --color-base-300: var(--sf-c-n200); --color-base-400: var(--sf-c-n200); --color-base-500: var(--sf-c-n500); --color-base-600: var(--sf-c-n500); --color-base-700: var(--sf-c-n700); --color-base-800: var(--sf-c-n700); --color-base-900: var(--sf-c-n900); --color-base-950: var(--sf-c-n900); --color-base-content: var(--sf-color-text); --color-gray-300: var(--sf-c-n200); --color-gray-400: var(--sf-color-text-muted); --color-gray-500: var(--sf-color-text-muted); --color-gray-600: var(--sf-color-text-muted); --color-gray-700: var(--sf-c-n700); --color-gray-800: var(--sf-c-n900); }