:root {
  --color-bg: #12181c;
  --color-solid-button: #242c31;
  --color-bg-wash-start: rgb(18 24 28 / 0.28);
  --color-bg-wash-mid: rgb(8 12 14 / 0.55);
  --color-bg-wash-end: rgb(8 12 14 / 0.82);
  --color-surface: rgb(18 24 28 / 0.58);
  --color-surface-muted: rgb(255 255 255 / 0.08);
  --color-text: #f4f7f6;
  --color-text-muted: rgb(244 247 246 / 0.72);
  --color-border: rgb(255 255 255 / 0.22);
  --color-accent: #4db894;
  --color-accent-hover: #6dccab;
  --color-accent-text: #f4f7f6;
  --color-cta: #f4f7f6;
  --color-cta-text: #12181a;
  --color-cta-hover: #ffffff;
  --color-danger: #e8a0a0;
  --color-success: #8fd4b8;
  --color-warning: #e2c08a;
  --color-overlay: rgb(8 12 14 / 0.55);
  --color-focus: #9ee0c8;
  --color-glass: rgb(255 255 255 / 0.14);
  --color-glass-strong: rgb(12 16 18 / 0.62);
  --color-glass-pill: rgb(255 255 255 / 0.16);
  --color-glass-pill-border: rgb(255 255 255 / 0.28);
  --color-glass-dark: rgb(8 12 14 / 0.72);
  --color-glass-frost: rgb(255 255 255 / 0.2);
  --color-glass-frost-border: rgb(255 255 255 / 0.38);
  --color-product-panel: rgb(12 16 18 / 0.78);
  --color-product-panel-border: rgb(255 255 255 / 0.22);
  --color-order-card: #171f24;
  --product-stage-scrim: linear-gradient(
    180deg,
    rgb(8 12 14 / 0.18),
    transparent 36%,
    rgb(8 12 14 / 0.45)
  );
  --color-control: rgb(8 12 14 / 0.55);
  --color-hover: rgb(255 255 255 / 0.12);
  --color-media-placeholder: rgb(8 12 14 / 0.35);
  --color-on-media: rgb(255 255 255 / 0.92);
  --color-on-media-muted: rgb(255 255 255 / 0.22);
  --shadow-sm: 0 8px 24px rgb(0 0 0 / 0.22);
  --shadow-md: 0 22px 50px rgb(0 0 0 / 0.32);
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-body: 1.0625rem;
  --text-md: 1.125rem;
  --text-lg: 1.375rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.125rem;
  --leading-tight: 1.25;
  --leading-body: 1.55;
  --leading-relaxed: 1.7;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-full: 999px;
  --control-height: 48px;
  --control-height-lg: 56px;
  --touch-min: 44px;
  --container: 1180px;
  --header-height: 76px;
  --font-sans: var(--font-noto-sans);
  --background: var(--color-bg);
  --foreground: var(--color-text);
  --card: var(--color-glass-strong);
  --card-foreground: var(--color-text);
  --primary: var(--color-cta);
  --primary-foreground: var(--color-cta-text);
  --secondary: var(--color-surface-muted);
  --secondary-foreground: var(--color-text);
  --muted: var(--color-surface-muted);
  --muted-foreground: var(--color-text-muted);
  --destructive: var(--color-danger);
  --border: var(--color-border);
  --input: var(--color-border);
  --ring: var(--color-focus);
}