:root {
  --color-background-body-primary: var(--color-white-0);
  --color-text-body: var(--color-neutral-800);
  --color-text-accent-primary: var(--color-juhatchublue-600);
  --color-icon-body: var(--color-neutral-800);
  --color-icon-accent-primary: var(--color-juhatchublue-600);
  --color-text-description: var(--color-neutral-500);
  --color-text-placeholder: var(--color-neutral-300);
  --color-icon-description: var(--color-neutral-500);
  --color-icon-placeholder: var(--color-neutral-300);
  --color-background-accent-primary: var(--color-juhatchublue-600);
  --color-text-onfill: var(--color-white-0);
  --color-icon-onfill: var(--color-white-0);
  --color-border-body: var(--color-neutral-300);
  --color-border-onfill: var(--color-white-0);
  --color-button-primary-primary: var(--color-juhatchublue-600);
  --color-button-secondary-hover: var(--color-juhatchublue-50);
  --color-button-secondary-secondary: var(--color-white-0);
  --color-button-primary-disabled: var(--color-neutral-300);
  --color-button-tertiary-1-tertiary-1: var(--color-juhatchuorange-500);
  --color-button-tertiary-2-tertiary-2: var(--color-juhatchuamber-400);
  --color-button-tertiary-3-tertiary-3: var(--color-juhatchuamber-300);
  --color-background-accent-secondary: var(--color-juhatchublue-100);
  --color-icon-accent-secondary: var(--color-juhatchublue-100);
  --color-border-accent-primary: var(--color-juhatchublue-600);
  --color-shadow-elevation1: rgb(26 88 162 / 16%);
  --color-shadow-elevation2: #000;
  --color-button-primary-hover: var(--color-white-0);
  --color-button-secondary-disabled: var(--color-neutral-100);
  --color-text-disabled: var(--color-neutral-300);
  --color-icon-disabled: var(--color-neutral-300);
  --color-icon-accent-tertiary-1: var(--color-juhatchuorange-500);
  --color-icon-accent-tertiary-2: var(--color-juhatchuamber-400);
  --color-icon-accent-tertiary-3: var(--color-juhatchuamber-300);
  --color-divider-body: var(--color-neutral-300);
  --color-divider-accent-primary: var(--color-juhatchublue-600);
  --color-divider-onfill: var(--color-white-0);
  --color-text-accent-tertiary-1: var(--color-juhatchuorange-500);
  --color-text-accent-tertiary-2: var(--color-juhatchuamber-400);
  --color-text-accent-tertiary-3: var(--color-juhatchuamber-300);
  --color-border-accent-tertiary-1: var(--color-juhatchuorange-500);
  --color-border-accent-tertiary-2: var(--color-juhatchuamber-400);
  --color-border-accent-tertiary-3: var(--color-juhatchuamber-300);
  --color-border-accent-secondary: var(--color-juhatchublue-100);
  --color-divider-accent-secondary: var(--color-juhatchublue-100);
  --color-divider-accent-tertiary-1: var(--color-juhatchuorange-500);
  --color-divider-accent-tertiary-2: var(--color-juhatchuamber-400);
  --color-divider-accent-tertiary-3: var(--color-juhatchuamber-300);
  --color-background-accent-tertiary-1: var(--color-juhatchuorange-500);
  --color-background-accent-tertiary-2: var(--color-juhatchuamber-400);
  --color-background-accent-tertiary-3: var(--color-juhatchuamber-300);
  --color-background-body-secondary: var(--color-neutral-700);
  --color-background-accent-problem: var(--color-neutral-200);
  --color-background-accent-solution: var(--color-juhatchublue-100);
  --color-background-description-primary: var(--color-neutral-300);
  --color-background-accent-tertiary: var(--color-juhatchublue-50);
  --color-background-accent-quaternary: var(--color-juhatchublue-200);
  --value-radius-radius4: 4px;
  --value-radius-radius8: 8px;
  --value-radius-radius16: 16px;
  --value-radius-radiusfull: 9999px;
  --value-typography-fontsize14: 14px;
  --value-typography-fontsize16: 16px;
  --value-typography-fontsize18: 18px;
  --value-typography-fontsize20: 20px;
  --value-typography-fontsize28: 28px;
  --value-spacing-spacing4: 4px;
  --value-spacing-spacing8: 8px;
  --value-spacing-spacing12: 12px;
  --value-spacing-spacing16: 16px;
  --value-spacing-spacing24: 24px;
  --value-spacing-spacing32: 32px;
  --value-spacing-spacing40: 40px;
  --value-spacing-spacing48: 48px;
  --value-typography-fontsize34: 34px;
  --value-typography-fontsize12: 12px;
  --value-spacing-spacing64: 64px;
  --value-opacity-opacity30: 0.3;
  --value-typography-fontsize10: 10px;
  --value-typography-fontsize40: 40px;
  --value-typography-fontsize64: 64px;
  --value-spacing-spacing120: 120px;
  --value-spacing-spacing80: 80px;
  --value-spacing-spacing100: 100px;
  --value-typography-fontsize24: 24px;
}

@media (width < 768px) {
  .product-theme-order {
    --value-radius-radius4: 2px;
    --value-radius-radius8: 4px;
    --value-radius-radius16: 8px;
    --value-radius-radiusfull: 9999px;
    --value-typography-fontsize14: 12px;
    --value-typography-fontsize16: 14px;
    --value-typography-fontsize18: 16px;
    --value-typography-fontsize20: 18px;
    --value-typography-fontsize28: 22px;
    --value-spacing-spacing4: 4px;
    --value-spacing-spacing8: 4px;
    --value-spacing-spacing12: 8px;
    --value-spacing-spacing16: 16px;
    --value-spacing-spacing24: 24px;
    --value-spacing-spacing32: 32px;
    --value-spacing-spacing40: 40px;
    --value-spacing-spacing48: 48px;
    --value-typography-fontsize34: 28px;
    --value-typography-fontsize12: 12px;
    --value-spacing-spacing64: 64px;
    --value-opacity-opacity30: 0.3;
    --value-typography-fontsize10: 10px;
    --value-typography-fontsize40: 28px;
    --value-typography-fontsize64: 40px;
    --value-spacing-spacing120: 80px;
    --value-spacing-spacing80: 72px;
    --value-spacing-spacing100: 72px;
    --value-typography-fontsize24: 20px;
  }
}