:root {
  --theme-color: #3b9ee8;

  --helper-theme-color: var(--theme-color);
  --checkout-theme-color: var(--theme-color);
  --cart-theme-color: var(--theme-color);
  --profile-theme-color: var(--theme-color);

  --option-bg-selected: var(--theme-color);
  --option-bg-active: #3b9ee880;

  /* Color — surface */
  --ui-bg: #ffffff;
  --ui-bg-muted: #f9f9f9;
  --ui-bg-hover: #f4f4f5;
  --ui-backdrop: rgba(0, 0, 0, 0.5);

  /* Color — border */
  --ui-border: #e4e4e7;
  --ui-border-input: #d4d4d8;
  --ui-ring: var(--checkout-theme-color);

  /* Color — text */
  --ui-text: #09090b;
  --ui-text-muted: #71717a;
  --ui-text-subtle: #a1a1aa;
  --ui-text-invert: #ffffff;

  /* Color — accent (dark fill, like btn-checkout) */
  --ui-accent: var(--checkout-theme-color);
  --ui-accent-fg: #ffffff;

  /* Color — semantic */
  --ui-success: #16a34a;
  --ui-success-bg: #f0fdf4;
  --ui-success-border: #bbf7d0;
  --ui-danger: #dc2626;
  --ui-danger-bg: #fef2f2;
  --ui-danger-border: #fecaca;
  --ui-warning: #d97706;
  --ui-warning-bg: #fffbeb;
  --ui-warning-border: #fde68a;
  --ui-info: #2563eb;
  --ui-info-bg: #eff6ff;
  --ui-info-border: #bfdbfe;

  /* Radius */
  --ui-radius-sm: 6px;
  --ui-radius: 8px;
  --ui-radius-lg: 12px;
  --ui-radius-full: 9999px;

  /* Shadow */
  --ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --ui-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --ui-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12);

  /* Focus ring */
  --ui-focus-shadow: 0 0 0 3px rgba(24, 24, 27, 0.06);

  /* Typography */
  --ui-fs-xs: 11px;
  --ui-fs-sm: 12px;
  --ui-fs-base: 13px;
  --ui-fs-md: 14px;
  --ui-fs-lg: 16px;
  --ui-fs-xl: 18px;
  --ui-fs-2xl: 22px;
  --ui-fs-3xl: 28px;

  /* Spacing scale */
  --ui-sp-1: 4px;
  --ui-sp-2: 8px;
  --ui-sp-3: 12px;
  --ui-sp-4: 16px;
  --ui-sp-5: 20px;
  --ui-sp-6: 24px;
  --ui-sp-8: 32px;

  /* Transition */
  --ui-transition: 0.15s ease;
  --ui-transition-fast: 0.12s ease;

  /* Z-index layers */
  --ui-z-navbar: 100;
  --ui-z-dropdown: 200;
  --ui-z-modal: 1050;
  --ui-z-toast: 1100;
  --ui-z-tooltip: 1200;
}