:root {
  color-scheme: light dark;

  --wds-foreground: #000000;
  --wds-secondary-foreground: rgba(60, 60, 67, 0.6);
  --wds-tertiary-foreground: rgba(60, 60, 67, 0.3);
  --wds-quaternary-foreground: rgba(60, 60, 67, 0.18);
  --wds-canvas: #f2f2f7;
  --wds-card: #ffffff;
  --wds-raised-fill: rgba(118, 118, 128, 0.12);
  --wds-placeholder: rgba(120, 120, 128, 0.2);
  --wds-separator: rgba(60, 60, 67, 0.29);
  --wds-accent: #6e513c;
  --wds-on-accent: #ffffff;
  --wds-accent-text: #6e513c;
  --wds-secondary-accent: #ac7f5e;
  --wds-data: #ac7f5e;
  --wds-destructive: #ff383c;
  --wds-system-control-accent: #0088ff;

  --wds-glass-fill: rgba(255, 255, 255, 0.55);
  --wds-glass-border: rgba(0, 0, 0, 0.12);
  --wds-glass-blur: 20px;
  --wds-glass-saturate: 1.4;

  --wds-font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --wds-large-title: calc(34rem / 17);
  --wds-title1: calc(28rem / 17);
  --wds-title2: calc(22rem / 17);
  --wds-title3: calc(20rem / 17);
  --wds-body: 1rem;
  --wds-subheadline: calc(15rem / 17);
  --wds-footnote: calc(13rem / 17);
  --wds-caption: calc(12rem / 17);

  --wds-type-page-name: 800 var(--wds-large-title) / calc(41 / 34) var(--wds-font-family);
  --wds-type-display-large: 700 var(--wds-large-title) / calc(41 / 34) var(--wds-font-family);
  --wds-type-display-medium: 600 var(--wds-title1) / calc(34 / 28) var(--wds-font-family);
  --wds-type-title: 800 var(--wds-title2) / calc(28 / 22) var(--wds-font-family);
  --wds-type-heading: 600 var(--wds-title3) / calc(25 / 20) var(--wds-font-family);
  --wds-type-heading-medium: 600 var(--wds-body) / calc(22 / 17) var(--wds-font-family);
  --wds-type-subheading: 600 var(--wds-body) / calc(22 / 17) var(--wds-font-family);
  --wds-type-body: 400 var(--wds-body) / calc(22 / 17) var(--wds-font-family);
  --wds-type-body-medium: 400 var(--wds-subheadline) / calc(20 / 15) var(--wds-font-family);
  --wds-type-body-small: 400 var(--wds-footnote) / calc(18 / 13) var(--wds-font-family);
  --wds-type-label: 600 var(--wds-subheadline) / calc(20 / 15) var(--wds-font-family);
  --wds-type-caption: 500 var(--wds-caption) / calc(16 / 12) var(--wds-font-family);

  --wds-space-2: 2px;
  --wds-space-4: 4px;
  --wds-space-8: 8px;
  --wds-space-12: 12px;
  --wds-space-16: 16px;
  --wds-space-20: 20px;
  --wds-space-24: 24px;
  --wds-space-32: 32px;
  --wds-space-48: 48px;

  --wds-corner-radius-small: 8px;
  --wds-corner-radius-medium: 12px;
  --wds-corner-radius-large: 16px;
  --wds-corner-radius-extra-large: 24px;
  --wds-corner-radius-pill: 999px;

  --wds-page-margin: 16px;
  --wds-page-bottom-padding: var(--wds-space-32);
  --wds-major-group-spacing: 24px;
  --wds-card-spacing: 35px;
  --wds-card-content-inset: 16px;
  --wds-card-corner-radius: 26px;
  --wds-related-content-spacing: 8px;
  --wds-related-content-roomy-spacing: 12px;
  --wds-minimum-touch-target: 44px;
  --wds-row-minimum-height: 52px;
  --wds-row-vertical-padding: 15px;
  --wds-readable-width: calc(672rem / 17);
}

@media (prefers-color-scheme: dark) {
  :root {
    --wds-foreground: #ffffff;
    --wds-secondary-foreground: rgba(235, 235, 245, 0.6);
    --wds-tertiary-foreground: rgba(235, 235, 245, 0.3);
    --wds-quaternary-foreground: rgba(235, 235, 245, 0.18);
    --wds-canvas: #000000;
    --wds-card: #1c1c1e;
    --wds-raised-fill: rgba(118, 118, 128, 0.24);
    --wds-placeholder: rgba(120, 120, 128, 0.36);
    --wds-separator: rgba(84, 84, 88, 0.6);
    --wds-accent: #a87f5e;
    --wds-on-accent: #000000;
    --wds-accent-text: #a87f5e;
    --wds-secondary-accent: #d7bfab;
    --wds-data: #d7bfab;
    --wds-destructive: #ff4245;
    --wds-system-control-accent: #0091ff;

    --wds-glass-fill: rgba(255, 255, 255, 0.08);
    --wds-glass-border: rgba(255, 255, 255, 0.18);
  }
}