:root {
  color-scheme: light;
  --product-bg: #f7f7f3;
  --product-surface: #ffffff;
  --product-surface-soft: #f7f8f5;
  --product-surface-muted: #f1f2ee;
  --product-text: #11120f;
  --product-headline: #090a08;
  --product-muted: #6d6e67;
  --product-line: rgba(17, 18, 15, .1);
  --product-line-strong: rgba(17, 18, 15, .16);
  --product-primary: #28a8e9;
  --product-primary-hover: #159bdc;
  --product-primary-soft: #eaf7fd;
  --product-success: #1f9d68;
  --product-danger: #a92e43;
  --product-danger-soft: #fff1f3;
  --product-warning: #d9733d;
  --product-overlay: rgba(17, 18, 15, .34);
  --product-shadow: 0 18px 48px rgba(24, 27, 22, .09);
  --product-shadow-soft: 0 10px 28px rgba(24, 27, 22, .07);
  --product-headline-shadow: 0 1px 0 rgba(0, 0, 0, .055), 0 10px 28px rgba(20, 22, 18, .075);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --product-bg: #11120f;
  --product-surface: #1b1c18;
  --product-surface-soft: #20211d;
  --product-surface-muted: #292a25;
  --product-text: #f7f7f3;
  --product-headline: #f8f9f5;
  --product-muted: #a8aaa1;
  --product-line: rgba(255, 255, 255, .11);
  --product-line-strong: rgba(255, 255, 255, .17);
  --product-primary: #35b3f2;
  --product-primary-hover: #55bff4;
  --product-primary-soft: #142c38;
  --product-success: #48b987;
  --product-danger: #ef8a9a;
  --product-danger-soft: #351f23;
  --product-warning: #eda274;
  --product-overlay: rgba(0, 0, 0, .58);
  --product-shadow: 0 24px 62px rgba(0, 0, 0, .34);
  --product-shadow-soft: 0 14px 34px rgba(0, 0, 0, .24);
  --product-headline-shadow: 0 1px 0 rgba(0, 0, 0, .26), 0 13px 32px rgba(0, 0, 0, .24);
}