// Caster Design System — auto-generated. DO NOT EDIT.
// 
// To regenerate: run `npm run build` from design-system/build.
// Source files: design-system/tokens/{primitives,semantic,components}.json

$caster-color-blue-50: #eef1fa; // Brand-tinted background for cards, banners, callouts
$caster-color-blue-100: #dbe2f5; // Soft brand surface
$caster-color-blue-200: #b6c4eb;
$caster-color-blue-300: #7d92d6;
$caster-color-blue-500: #1e44c4;
$caster-color-blue-700: #0021a6; // USA Clean primary brand blue
$caster-color-blue-800: #001580; // Brand blue, hover/pressed
$caster-color-blue-900: #0d1a4d; // Deep navy used in announcement bar and footer (semantic: brand.deep)
$caster-color-gold-50: #fff8e6;
$caster-color-gold-100: #ffeac1;
$caster-color-gold-300: #f7c25a;
$caster-color-gold-500: #efaa22; // USA Clean accent gold
$caster-color-gold-600: #d8951a; // Accent gold, hover
$caster-color-gold-700: #8b5a00; // Deep gold for accent text on light surfaces. WCAG 2.2 AA: 5.93:1 vs white, 5.0:1 vs gold-tinted surface (passes 4.5:1).
$caster-color-gray-0: #ffffff; // Page background
$caster-color-gray-50: #f5f7fa; // Subtle surface (consolidated — replaces former #f5f5f5)
$caster-color-gray-150: #f4f5f7; // Search bar background — slightly different from gray.50, kept separate
$caster-color-gray-200: #ececec; // Muted surface, also used as subtle border
$caster-color-gray-300: #d9d9d9; // Default border, also used for placeholder strokes
$caster-color-gray-400: #c0c0c0; // Card hover border
$caster-color-gray-500: #757575; // Muted text
$caster-color-gray-600: #5d5d5d; // Subtle text
$caster-color-gray-700: #3a3a3a;
$caster-color-gray-800: #222222; // Secondary text
$caster-color-gray-900: #131313; // Default body text, also used for solid black contexts (badges)
$caster-color-gray-950: #1b252d; // Dark surface (machine card image bg)
$caster-color-green-50: #e6f7e6; // Success surface
$caster-color-green-100: #e6f4ea; // Success surface — bundle docs variant (slight green-blue lean)
$caster-color-green-300: #86efac; // Success border
$caster-color-green-500: #00a900; // Success
$caster-color-green-800: #15692a; // Canonical success text on light backgrounds (WCAG AA)
$caster-color-amber-50: #fff7e6; // Warning surface
$caster-color-amber-75: #fff4dc; // Warning surface — bundle docs callout variant
$caster-color-amber-300: #fde68a; // Warning border
$caster-color-amber-500: #d97706; // Warning
$caster-color-amber-700: #92400e; // Canonical warning text on light backgrounds (WCAG AA)
$caster-color-red-50: #fef2f2; // Error surface
$caster-color-red-100: #fbe9eb; // Error surface — bundle docs callout variant
$caster-color-red-500: #c70e1d; // Error
$caster-color-red-600: #a80c18; // Error, hover
$caster-color-red-800: #991b1b; // Canonical error text on light backgrounds (WCAG AA)
$caster-color-indigo-50: #eff6ff; // Info surface
$caster-color-indigo-300: #bfdbfe; // Info border
$caster-color-indigo-700: #1e40af; // Info text
$caster-color-alpha-brand-10: rgba(0, 33, 166, 0.1); // Input focus ring
$caster-color-alpha-brand-20: rgba(0, 33, 166, 0.2); // Brand alert border
$caster-color-alpha-brand-04: rgba(0, 33, 166, 0.04); // Brand wash — compat checker header
$caster-color-alpha-brand-06: rgba(0, 33, 166, 0.06); // Brand wash — outline button hover
$caster-color-alpha-brand-08: rgba(0, 33, 166, 0.08); // Brand wash — pill-brand bg
$caster-color-alpha-accent-15: rgba(239, 170, 34, 0.15); // Accent wash — pill-accent bg
$caster-color-alpha-accent-18: rgba(239, 170, 34, 0.18);
$caster-color-alpha-white-10: rgba(255, 255, 255, 0.1); // Footer email field bg
$caster-color-alpha-white-20: rgba(255, 255, 255, 0.2); // Footer email field border
$caster-color-alpha-white-40: rgba(255, 255, 255, 0.4);
$caster-color-alpha-white-50: rgba(255, 255, 255, 0.5); // Outline-light button border
$caster-color-alpha-white-70: rgba(255, 255, 255, 0.7);
$caster-color-alpha-white-85: rgba(255, 255, 255, 0.85); // Wishlist button bg over images
$caster-color-alpha-black-10: rgba(0, 0, 0, 0.1); // Shadow md alpha
$caster-color-alpha-black-12: rgba(0, 0, 0, 0.12); // Shadow lg alpha
$caster-color-alpha-black-14: rgba(0, 0, 0, 0.14); // Shadow xl alpha
$caster-color-alpha-black-50: rgba(0, 0, 0, 0.5); // Machine card overflow button bg
$caster-color-alpha-black-06: rgba(0, 0, 0, 0.06); // Shadow xs alpha
$caster-color-alpha-black-08: rgba(0, 0, 0, 0.08); // Shadow sm alpha
$caster-spacing-0: 0;
$caster-spacing-1: 0.25rem; // 4px
$caster-spacing-2: 0.5rem; // 8px
$caster-spacing-3: 0.75rem; // 12px
$caster-spacing-4: 1rem; // 16px
$caster-spacing-5: 1.25rem; // 20px
$caster-spacing-6: 1.5rem; // 24px
$caster-spacing-8: 2rem; // 32px
$caster-spacing-10: 2.5rem; // 40px
$caster-spacing-12: 3rem; // 48px
$caster-spacing-16: 4rem; // 64px
$caster-spacing-20: 5rem; // 80px
$caster-spacing-24: 6rem; // 96px
$caster-spacing-32: 8rem; // 128px
$caster-radius-0: 0;
$caster-radius-xs: 3px; // Small badge / stock pill
$caster-radius-sm: 4px;
$caster-radius-md: 8px;
$caster-radius-lg: 12px;
$caster-radius-xl: 16px;
$caster-radius-full: 9999px; // Pills, avatars, fully rounded
$caster-border-width-0: 0;
$caster-border-width-thin: 1px;
$caster-border-width-med: 1.5px; // Outline button border
$caster-border-width-thick: 2px; // Tab underline, focus
$caster-font-family-sans: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; // Default. Open Sans loaded from Google Fonts.
$caster-font-family-mono: ui-monospace, SFMono-Regular, Menlo, monospace; // Code, SKUs, technical specs
$caster-font-weight-regular: 400;
$caster-font-weight-medium: 500;
$caster-font-weight-semibold: 600;
$caster-font-weight-bold: 700;
$caster-font-weight-extrabold: 800; // Used sparingly — bundle totals, key metrics
$caster-font-size-3xs: 0.625rem; // 10px — stock badges, smallest labels (added per D21)
$caster-font-size-2xs: 0.75rem; // 12px
$caster-font-size-xs: 0.875rem; // 14px
$caster-font-size-sm: 1rem; // 16px (body default)
$caster-font-size-md: 1.125rem; // 18px
$caster-font-size-lg: 1.25rem; // 20px
$caster-font-size-xl: 1.5rem; // 24px
$caster-font-size-2xl: 2rem; // 32px
$caster-font-size-3xl: 2.5rem; // 40px
$caster-font-size-4xl: 3rem; // 48px
$caster-font-size-5xl: 3.5rem; // 56px — display hero
$caster-line-height-tight: 1.2;
$caster-line-height-snug: 1.3;
$caster-line-height-normal: 1.4;
$caster-line-height-relaxed: 1.5;
$caster-line-height-loose: 1.65; // Long-form prose (docs, briefs)
$caster-letter-spacing-tighter: -0.02em;
$caster-letter-spacing-tight: -0.01em;
$caster-letter-spacing-normal: 0;
$caster-letter-spacing-wide: 0.03em; // Pill labels
$caster-letter-spacing-wider: 0.05em; // Eyebrows, small caps
$caster-letter-spacing-widest: 0.08em; // Section header labels
$caster-duration-instant: 0ms;
$caster-duration-fast: 120ms;
$caster-duration-base: 200ms;
$caster-duration-slow: 320ms;
$caster-easing-linear: linear;
$caster-easing-ease: ease;
$caster-easing-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
$caster-easing-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
$caster-z-index-base: 0;
$caster-z-index-dropdown: 200;
$caster-z-index-sticky: 300;
$caster-z-index-overlay: 400;
$caster-z-index-modal: 500;
$caster-z-index-toast: 600;
$caster-breakpoint-small: 0; // Mobile / Small. Default styles target this range (0–767px).
$caster-breakpoint-medium: 768px; // Tablet / Medium. 768–1199px.
$caster-breakpoint-large: 1200px; // Desktop / Large. 1200px+.
$caster-size-control-xs: 28px;
$caster-size-control-sm: 36px;
$caster-size-control-md: 44px; // Default button/input height
$caster-size-control-lg: 52px;
$caster-size-control-xl: 60px;
$caster-size-container-max: 1440px; // Max content width
$caster-size-container-sm: 768px;
$caster-size-container-md: 1024px;
$caster-size-container-lg: 1200px;
$caster-size-header-height-small: 56px;
$caster-size-header-height-medium: 64px;
$caster-size-header-height-large: 72px;
$caster-opacity-disabled: 0.4; // Deselected/disabled state (D22)
$caster-opacity-muted: 0.7;
$caster-opacity-scrim-light: 0.5;
$caster-opacity-scrim: 0.85;
$caster-button-outline-bg: rgba(0, 0, 0, 0);
$caster-button-outline-light-bg: rgba(0, 0, 0, 0);
$caster-button-ghost-bg: rgba(0, 0, 0, 0);
$caster-machine-card-image-aspect: 4 / 3;
$caster-pill-padding-y: 2px;
$caster-stock-badge-padding-y: 2px;
$caster-qty-stepper-default-height: 32px;
$caster-qty-stepper-default-btn-width: 32px;
$caster-qty-stepper-default-input-width: 44px;
$caster-qty-stepper-large-btn-width: 40px;
$caster-qty-stepper-large-input-width: 56px;
$caster-header-logo-height: 52px;
$caster-primary-nav-height: 44px;
$caster-dropdown-min-width: 180px;
$caster-color-brand-default: $caster-color-blue-700;
$caster-color-brand-hover: $caster-color-blue-800;
$caster-color-brand-deep: $caster-color-blue-900; // Announcement bar, footer (D7)
$caster-color-brand-subtle: $caster-color-blue-50; // Brand-tinted surface
$caster-color-accent-default: $caster-color-gold-500;
$caster-color-accent-hover: $caster-color-gold-600;
$caster-color-accent-subtle: $caster-color-gold-50;
$caster-color-accent-deep: $caster-color-gold-700; // Accent text on light surfaces (WCAG AA, D9)
$caster-color-text-default: $caster-color-gray-900;
$caster-color-text-secondary: $caster-color-gray-800;
$caster-color-text-subtle: $caster-color-gray-600;
$caster-color-text-muted: $caster-color-gray-500;
$caster-color-text-inverted: $caster-color-gray-0;
$caster-color-text-brand: $caster-color-blue-700;
$caster-color-text-accent: $caster-color-gold-500;
$caster-color-text-link: $caster-color-blue-700;
$caster-color-surface-default: $caster-color-gray-0; // Page background
$caster-color-surface-subtle: $caster-color-gray-50; // Cards on white pages, inputs (D6: consolidated to #f5f7fa)
$caster-color-surface-muted: $caster-color-gray-200; // Heavier neutral surface
$caster-color-surface-search: $caster-color-gray-150; // Search-bar field bg specifically
$caster-color-surface-dark: $caster-color-gray-950; // Machine-card image bg
$caster-color-surface-inverted: $caster-color-blue-900; // Announcement bar, footer
$caster-color-border-default: $caster-color-gray-300;
$caster-color-border-subtle: $caster-color-gray-200;
$caster-color-border-strong: $caster-color-gray-400; // Card hover, active state
$caster-color-border-brand: $caster-color-blue-700; // Focused inputs, selected cards
$caster-color-border-focus: $caster-color-alpha-brand-10; // Focus ring shadow
$caster-color-icon-default: $caster-color-gray-900;
$caster-color-icon-subtle: $caster-color-gray-600;
$caster-color-icon-muted: $caster-color-gray-300; // Image-placeholder strokes (D11: replaces former #ccc)
$caster-color-icon-brand: $caster-color-blue-700;
$caster-color-icon-accent: $caster-color-gold-500;
$caster-color-icon-inverted: $caster-color-gray-0;
$caster-color-feedback-success-default: $caster-color-green-500;
$caster-color-feedback-success-text: $caster-color-green-800; // Canonical success text on light surface (#15692a, WCAG AA)
$caster-color-feedback-success-surface: $caster-color-green-50;
$caster-color-feedback-success-border: $caster-color-green-300;
$caster-color-feedback-warning-default: $caster-color-amber-500;
$caster-color-feedback-warning-text: $caster-color-amber-700; // Canonical warning text (#92400e, WCAG AA)
$caster-color-feedback-warning-surface: $caster-color-amber-50;
$caster-color-feedback-warning-border: $caster-color-amber-300;
$caster-color-feedback-error-default: $caster-color-red-500;
$caster-color-feedback-error-hover: $caster-color-red-600;
$caster-color-feedback-error-text: $caster-color-red-800; // Canonical error text (#991b1b, WCAG AA)
$caster-color-feedback-error-surface: $caster-color-red-50;
$caster-color-feedback-error-border: $caster-color-red-500;
$caster-color-feedback-info-default: $caster-color-indigo-700;
$caster-color-feedback-info-text: $caster-color-indigo-700;
$caster-color-feedback-info-surface: $caster-color-indigo-50;
$caster-color-feedback-info-border: $caster-color-indigo-300;
$caster-color-feedback-stock-in: $caster-color-green-800;
$caster-color-feedback-stock-in-bg: $caster-color-green-50;
$caster-color-feedback-stock-low: $caster-color-amber-700;
$caster-color-feedback-stock-low-bg: $caster-color-amber-50;
$caster-color-feedback-stock-out: $caster-color-red-800;
$caster-color-feedback-stock-out-bg: $caster-color-red-50;
$caster-color-feedback-stock-back: $caster-color-gray-700;
$caster-color-feedback-stock-back-bg: $caster-color-gray-50;
$caster-color-overlay-scrim: $caster-color-alpha-black-50; // Modal/menu scrim
$caster-color-overlay-image-tint: $caster-color-alpha-white-85; // Wishlist button bg over images
$caster-color-overlay-image-overlay: $caster-color-alpha-black-50; // Machine card icon bg
$caster-color-overlay-brand-wash: $caster-color-alpha-brand-06; // Brand hover wash
$caster-radius-control: $caster-radius-sm; // Buttons, inputs, badges
$caster-radius-card: $caster-radius-md; // Cards, alerts
$caster-radius-panel: $caster-radius-lg; // Larger surfaces, modals
$caster-radius-pill: $caster-radius-full;
$caster-radius-tag: $caster-radius-xs; // Stock pills, OEM badges
$caster-shadow-xs: 0 1px 2px $caster-color-alpha-black-06;
$caster-shadow-sm: 0 1px 4px $caster-color-alpha-black-08;
$caster-shadow-md: 0 4px 12px $caster-color-alpha-black-10;
$caster-shadow-lg: 0 8px 24px $caster-color-alpha-black-12;
$caster-shadow-xl: 0 16px 40px $caster-color-alpha-black-14;
$caster-typography-display-lg-font-family: $caster-font-family-sans; // 56px — hero/landing
$caster-typography-display-lg-font-size: $caster-font-size-5xl; // 56px — hero/landing
$caster-typography-display-lg-font-weight: $caster-font-weight-extrabold; // 56px — hero/landing
$caster-typography-display-lg-line-height: $caster-line-height-tight; // 56px — hero/landing
$caster-typography-display-lg-letter-spacing: $caster-letter-spacing-tighter; // 56px — hero/landing
$caster-typography-display-md-font-family: $caster-font-family-sans; // 48px — section hero
$caster-typography-display-md-font-size: $caster-font-size-4xl; // 48px — section hero
$caster-typography-display-md-font-weight: $caster-font-weight-bold; // 48px — section hero
$caster-typography-display-md-line-height: $caster-line-height-tight; // 48px — section hero
$caster-typography-display-md-letter-spacing: $caster-letter-spacing-tight; // 48px — section hero
$caster-typography-display-sm-font-family: $caster-font-family-sans; // 40px — compact hero, card hero
$caster-typography-display-sm-font-size: $caster-font-size-3xl; // 40px — compact hero, card hero
$caster-typography-display-sm-font-weight: $caster-font-weight-bold; // 40px — compact hero, card hero
$caster-typography-display-sm-line-height: $caster-line-height-tight; // 40px — compact hero, card hero
$caster-typography-display-sm-letter-spacing: $caster-letter-spacing-tight; // 40px — compact hero, card hero
$caster-typography-heading-h1-font-family: $caster-font-family-sans;
$caster-typography-heading-h1-font-size: $caster-font-size-3xl;
$caster-typography-heading-h1-font-weight: $caster-font-weight-bold;
$caster-typography-heading-h1-line-height: $caster-line-height-tight;
$caster-typography-heading-h1-letter-spacing: $caster-letter-spacing-normal;
$caster-typography-heading-h2-font-family: $caster-font-family-sans;
$caster-typography-heading-h2-font-size: $caster-font-size-2xl;
$caster-typography-heading-h2-font-weight: $caster-font-weight-bold;
$caster-typography-heading-h2-line-height: $caster-line-height-tight;
$caster-typography-heading-h2-letter-spacing: $caster-letter-spacing-normal;
$caster-typography-heading-h3-font-family: $caster-font-family-sans;
$caster-typography-heading-h3-font-size: $caster-font-size-xl;
$caster-typography-heading-h3-font-weight: $caster-font-weight-bold;
$caster-typography-heading-h3-line-height: $caster-line-height-snug;
$caster-typography-heading-h3-letter-spacing: $caster-letter-spacing-normal;
$caster-typography-heading-h4-font-family: $caster-font-family-sans;
$caster-typography-heading-h4-font-size: $caster-font-size-lg;
$caster-typography-heading-h4-font-weight: $caster-font-weight-bold;
$caster-typography-heading-h4-line-height: $caster-line-height-snug;
$caster-typography-heading-h4-letter-spacing: $caster-letter-spacing-normal;
$caster-typography-heading-h5-font-family: $caster-font-family-sans;
$caster-typography-heading-h5-font-size: $caster-font-size-md;
$caster-typography-heading-h5-font-weight: $caster-font-weight-bold;
$caster-typography-heading-h5-line-height: $caster-line-height-snug;
$caster-typography-heading-h5-letter-spacing: $caster-letter-spacing-normal;
$caster-typography-heading-h6-font-family: $caster-font-family-sans;
$caster-typography-heading-h6-font-size: $caster-font-size-sm;
$caster-typography-heading-h6-font-weight: $caster-font-weight-bold;
$caster-typography-heading-h6-line-height: $caster-line-height-snug;
$caster-typography-heading-h6-letter-spacing: $caster-letter-spacing-normal;
$caster-typography-body-lg-font-family: $caster-font-family-sans; // 18px — emphasized prose
$caster-typography-body-lg-font-size: $caster-font-size-md; // 18px — emphasized prose
$caster-typography-body-lg-font-weight: $caster-font-weight-regular; // 18px — emphasized prose
$caster-typography-body-lg-line-height: $caster-line-height-relaxed; // 18px — emphasized prose
$caster-typography-body-lg-letter-spacing: $caster-letter-spacing-normal; // 18px — emphasized prose
$caster-typography-body-md-font-family: $caster-font-family-sans; // 16px — body default
$caster-typography-body-md-font-size: $caster-font-size-sm; // 16px — body default
$caster-typography-body-md-font-weight: $caster-font-weight-regular; // 16px — body default
$caster-typography-body-md-line-height: $caster-line-height-relaxed; // 16px — body default
$caster-typography-body-md-letter-spacing: $caster-letter-spacing-normal; // 16px — body default
$caster-typography-body-sm-font-family: $caster-font-family-sans; // 14px — secondary copy
$caster-typography-body-sm-font-size: $caster-font-size-xs; // 14px — secondary copy
$caster-typography-body-sm-font-weight: $caster-font-weight-regular; // 14px — secondary copy
$caster-typography-body-sm-line-height: $caster-line-height-normal; // 14px — secondary copy
$caster-typography-body-sm-letter-spacing: $caster-letter-spacing-normal; // 14px — secondary copy
$caster-typography-body-xs-font-family: $caster-font-family-sans; // 12px — fine print
$caster-typography-body-xs-font-size: $caster-font-size-2xs; // 12px — fine print
$caster-typography-body-xs-font-weight: $caster-font-weight-regular; // 12px — fine print
$caster-typography-body-xs-line-height: $caster-line-height-normal; // 12px — fine print
$caster-typography-body-xs-letter-spacing: $caster-letter-spacing-normal; // 12px — fine print
$caster-typography-label-md-font-family: $caster-font-family-sans; // 14px label
$caster-typography-label-md-font-size: $caster-font-size-xs; // 14px label
$caster-typography-label-md-font-weight: $caster-font-weight-semibold; // 14px label
$caster-typography-label-md-line-height: $caster-line-height-normal; // 14px label
$caster-typography-label-md-letter-spacing: $caster-letter-spacing-widest; // 14px label
$caster-typography-label-sm-font-family: $caster-font-family-sans; // 12px label
$caster-typography-label-sm-font-size: $caster-font-size-2xs; // 12px label
$caster-typography-label-sm-font-weight: $caster-font-weight-semibold; // 12px label
$caster-typography-label-sm-line-height: $caster-line-height-normal; // 12px label
$caster-typography-label-sm-letter-spacing: $caster-letter-spacing-widest; // 12px label
$caster-typography-label-xs-font-family: $caster-font-family-sans; // 10px label — stock badges, OEM badges
$caster-typography-label-xs-font-size: $caster-font-size-3xs; // 10px label — stock badges, OEM badges
$caster-typography-label-xs-font-weight: $caster-font-weight-bold; // 10px label — stock badges, OEM badges
$caster-typography-label-xs-line-height: $caster-line-height-normal; // 10px label — stock badges, OEM badges
$caster-typography-label-xs-letter-spacing: $caster-letter-spacing-wider; // 10px label — stock badges, OEM badges
$caster-typography-code-md-font-family: $caster-font-family-mono;
$caster-typography-code-md-font-size: $caster-font-size-xs;
$caster-typography-code-md-font-weight: $caster-font-weight-regular;
$caster-typography-code-md-line-height: $caster-line-height-normal;
$caster-typography-code-md-letter-spacing: $caster-letter-spacing-normal;
$caster-typography-code-sm-font-family: $caster-font-family-mono;
$caster-typography-code-sm-font-size: $caster-font-size-2xs;
$caster-typography-code-sm-font-weight: $caster-font-weight-regular;
$caster-typography-code-sm-line-height: $caster-line-height-normal;
$caster-typography-code-sm-letter-spacing: $caster-letter-spacing-normal;
$caster-motion-fast: $caster-duration-fast $caster-easing-ease; // Hover, focus
$caster-motion-base: $caster-duration-base $caster-easing-ease; // Card hover, dropdown
$caster-motion-slow: $caster-duration-slow $caster-easing-ease; // Modal, drawer
$caster-layout-container-pad-small: $caster-spacing-4; // 16px on mobile
$caster-layout-container-pad-medium: $caster-spacing-8; // 32px on tablet
$caster-layout-container-pad-large: $caster-spacing-20; // 80px on desktop
$caster-layout-section-gap-small: $caster-spacing-8;
$caster-layout-section-gap-medium: $caster-spacing-12;
$caster-layout-section-gap-large: $caster-spacing-16;
$caster-layout-header-height-small: $caster-size-header-height-small;
$caster-layout-header-height-medium: $caster-size-header-height-medium;
$caster-layout-header-height-large: $caster-size-header-height-large;
$caster-button-size-xs-height: $caster-size-control-xs;
$caster-button-size-xs-padding-x: $caster-spacing-3;
$caster-button-size-xs-font-size: $caster-font-size-2xs;
$caster-button-size-sm-height: $caster-size-control-sm;
$caster-button-size-sm-padding-x: $caster-spacing-4;
$caster-button-size-sm-font-size: $caster-font-size-xs;
$caster-button-size-md-height: $caster-size-control-md;
$caster-button-size-md-padding-x: $caster-spacing-5;
$caster-button-size-md-font-size: $caster-font-size-sm;
$caster-button-size-lg-height: $caster-size-control-lg;
$caster-button-size-lg-padding-x: $caster-spacing-6;
$caster-button-size-lg-font-size: $caster-font-size-md;
$caster-button-size-xl-height: $caster-size-control-xl;
$caster-button-size-xl-padding-x: $caster-spacing-8;
$caster-button-size-xl-font-size: $caster-font-size-md;
$caster-button-font-weight: $caster-font-weight-semibold;
$caster-button-outline-bg-hover: $caster-color-alpha-brand-06;
$caster-button-outline-border-width: $caster-border-width-med;
$caster-button-outline-light-bg-hover: $caster-color-alpha-white-10;
$caster-button-outline-light-border: $caster-color-alpha-white-50;
$caster-input-height: $caster-size-control-md;
$caster-input-padding-x: $caster-spacing-4;
$caster-input-font-size: $caster-font-size-sm;
$caster-input-ring-focus: $caster-color-alpha-brand-10;
$caster-card-padding: $caster-spacing-4;
$caster-product-card-image-padding: $caster-spacing-4;
$caster-product-card-badge-new-bg: $caster-color-gray-900;
$caster-pill-padding-x: $caster-spacing-2;
$caster-pill-font-size: $caster-font-size-2xs;
$caster-pill-font-weight: $caster-font-weight-semibold;
$caster-pill-letter-spacing: $caster-letter-spacing-wide;
$caster-pill-tone-brand-bg: $caster-color-alpha-brand-08;
$caster-pill-tone-accent-bg: $caster-color-alpha-accent-15;
$caster-stock-badge-padding-x: $caster-spacing-2;
$caster-stock-badge-font-size: $caster-font-size-3xs; // 10px (D21)
$caster-stock-badge-letter-spacing: $caster-letter-spacing-wide;
$caster-alert-padding: $caster-spacing-4;
$caster-alert-font-size: $caster-font-size-xs;
$caster-alert-tone-brand-bg: $caster-color-alpha-brand-06;
$caster-alert-tone-brand-border: $caster-color-alpha-brand-20;
$caster-qty-stepper-large-height: $caster-size-control-lg;
$caster-tab-padding-y: $caster-spacing-3;
$caster-tab-padding-x: $caster-spacing-5;
$caster-tab-border-width: $caster-border-width-thick;
$caster-header-height: $caster-size-header-height-large; // Default header height (large breakpoint). Component CSS overrides at smaller breakpoints via media queries.
$caster-announcement-bar-fg: $caster-color-alpha-white-85;
$caster-announcement-bar-padding-y: $caster-spacing-2;
$caster-announcement-bar-font-size: $caster-font-size-2xs;
$caster-footer-fg: $caster-color-alpha-white-85;
$caster-footer-fg-muted: $caster-color-alpha-white-40;
$caster-footer-padding-y: $caster-spacing-16;
$caster-elevation-rest: $caster-shadow-xs; // Cards at rest
$caster-elevation-raised: $caster-shadow-sm; // Cards on hover
$caster-elevation-floating: $caster-shadow-md; // Dropdowns, popovers
$caster-elevation-overlay: $caster-shadow-lg; // Modals
$caster-elevation-deep: $caster-shadow-xl;
$caster-button-radius: $caster-radius-control;
$caster-button-transition: $caster-motion-fast;
$caster-button-primary-bg: $caster-color-accent-default;
$caster-button-primary-bg-hover: $caster-color-accent-hover;
$caster-button-primary-fg: $caster-color-text-default;
$caster-button-brand-bg: $caster-color-brand-default;
$caster-button-brand-bg-hover: $caster-color-brand-hover;
$caster-button-brand-fg: $caster-color-text-inverted;
$caster-button-outline-fg: $caster-color-brand-default;
$caster-button-outline-border: $caster-color-brand-default;
$caster-button-outline-light-fg: $caster-color-text-inverted;
$caster-button-ghost-bg-hover: $caster-color-surface-subtle;
$caster-button-ghost-fg: $caster-color-text-subtle;
$caster-button-ghost-border: $caster-color-border-default;
$caster-button-text-fg: $caster-color-brand-default;
$caster-button-danger-bg: $caster-color-feedback-error-default;
$caster-button-danger-bg-hover: $caster-color-feedback-error-hover;
$caster-button-danger-fg: $caster-color-text-inverted;
$caster-input-radius: $caster-radius-control;
$caster-input-bg: $caster-color-surface-default;
$caster-input-fg: $caster-color-text-default;
$caster-input-placeholder: $caster-color-text-muted;
$caster-input-border: $caster-color-border-default;
$caster-input-border-focus: $caster-color-border-brand;
$caster-input-transition: $caster-motion-fast;
$caster-card-bg: $caster-color-surface-default;
$caster-card-border: $caster-color-border-default;
$caster-card-border-hover: $caster-color-border-strong;
$caster-card-radius: $caster-radius-card;
$caster-card-transition: $caster-motion-base;
$caster-product-card-image-bg: $caster-color-surface-subtle;
$caster-product-card-badge-radius: $caster-radius-tag;
$caster-product-card-badge-oem-bg: $caster-color-brand-default;
$caster-product-card-badge-oem-fg: $caster-color-text-inverted;
$caster-product-card-badge-sub-bg: $caster-color-accent-default;
$caster-product-card-badge-sub-fg: $caster-color-text-default;
$caster-product-card-badge-new-fg: $caster-color-text-inverted;
$caster-product-card-name-color: $caster-color-text-default;
$caster-product-card-name-hover: $caster-color-brand-default;
$caster-product-card-sku-color: $caster-color-text-muted;
$caster-product-card-price-color: $caster-color-text-default;
$caster-product-card-footer-border: $caster-color-border-subtle;
$caster-machine-card-image-bg: $caster-color-surface-dark;
$caster-machine-card-border-hover: $caster-color-border-brand;
$caster-machine-card-due-bg: $caster-color-surface-subtle;
$caster-machine-card-due-overdue-bg: $caster-color-feedback-error-surface;
$caster-machine-card-due-overdue-fg: $caster-color-feedback-error-default;
$caster-machine-card-due-ok-bg: $caster-color-feedback-success-surface;
$caster-machine-card-due-ok-fg: $caster-color-feedback-success-default;
$caster-pill-radius: $caster-radius-pill;
$caster-pill-tone-success-bg: $caster-color-feedback-success-surface;
$caster-pill-tone-success-fg: $caster-color-feedback-success-default;
$caster-pill-tone-warning-bg: $caster-color-feedback-warning-surface;
$caster-pill-tone-warning-fg: $caster-color-feedback-warning-default;
$caster-pill-tone-error-bg: $caster-color-feedback-error-surface;
$caster-pill-tone-error-fg: $caster-color-feedback-error-default;
$caster-pill-tone-brand-fg: $caster-color-brand-default;
$caster-pill-tone-neutral-bg: $caster-color-surface-muted;
$caster-pill-tone-neutral-fg: $caster-color-text-subtle;
$caster-pill-tone-accent-fg: $caster-color-accent-deep;
$caster-pill-tone-dark-bg: $caster-color-text-default;
$caster-pill-tone-dark-fg: $caster-color-text-inverted;
$caster-stock-badge-radius: $caster-radius-tag;
$caster-stock-badge-in-bg: $caster-color-feedback-stock-in-bg;
$caster-stock-badge-in-fg: $caster-color-feedback-stock-in;
$caster-stock-badge-low-bg: $caster-color-feedback-stock-low-bg;
$caster-stock-badge-low-fg: $caster-color-feedback-stock-low;
$caster-stock-badge-out-bg: $caster-color-feedback-stock-out-bg;
$caster-stock-badge-out-fg: $caster-color-feedback-stock-out;
$caster-stock-badge-back-bg: $caster-color-feedback-stock-back-bg;
$caster-stock-badge-back-fg: $caster-color-feedback-stock-back;
$caster-alert-radius: $caster-radius-card;
$caster-alert-tone-info-bg: $caster-color-feedback-info-surface;
$caster-alert-tone-info-fg: $caster-color-feedback-info-text;
$caster-alert-tone-info-border: $caster-color-feedback-info-border;
$caster-alert-tone-success-bg: $caster-color-feedback-success-surface;
$caster-alert-tone-success-fg: $caster-color-feedback-success-text;
$caster-alert-tone-success-border: $caster-color-feedback-success-border;
$caster-alert-tone-warning-bg: $caster-color-feedback-warning-surface;
$caster-alert-tone-warning-fg: $caster-color-feedback-warning-text;
$caster-alert-tone-warning-border: $caster-color-feedback-warning-border;
$caster-alert-tone-brand-fg: $caster-color-brand-default;
$caster-qty-stepper-btn-bg: $caster-color-surface-subtle;
$caster-qty-stepper-btn-bg-hover: $caster-color-surface-muted;
$caster-qty-stepper-border: $caster-color-border-default;
$caster-qty-stepper-radius: $caster-radius-control;
$caster-tab-fg: $caster-color-text-subtle;
$caster-tab-fg-hover: $caster-color-text-default;
$caster-tab-fg-active: $caster-color-brand-default;
$caster-tab-border-active: $caster-color-brand-default;
$caster-header-bg: $caster-color-surface-default;
$caster-announcement-bar-bg: $caster-color-surface-inverted;
$caster-announcement-bar-phone-fg: $caster-color-accent-default;
$caster-primary-nav-bg: $caster-color-surface-default;
$caster-primary-nav-border: $caster-color-border-default;
$caster-primary-nav-item-fg: $caster-color-brand-default;
$caster-primary-nav-item-bg-active: $caster-color-surface-subtle;
$caster-footer-bg: $caster-color-surface-inverted;
$caster-dropdown-bg: $caster-color-surface-default;
$caster-dropdown-border: $caster-color-border-default;
$caster-dropdown-radius: $caster-radius-card;
$caster-dropdown-item-fg: $caster-color-text-default;
$caster-dropdown-item-bg-hover: $caster-color-surface-subtle;
$caster-section-header-label-color: $caster-color-text-muted;
$caster-section-header-title-color: $caster-color-text-default;
$caster-section-header-desc-color: $caster-color-text-subtle;
$caster-section-header-link-color: $caster-color-brand-default;
$caster-card-shadow-rest: $caster-elevation-rest;
$caster-card-shadow-hover: $caster-elevation-raised;
$caster-dropdown-shadow: $caster-elevation-overlay;