:root {
  /* Colors: surface */
  --color-surface-bright: #ffffff;
  --color-surface: #f6f7f8;
  --color-surface-dim: #e9ecf0;
  --color-on-surface: #000000;
  --color-on-surface-var: #595f74;

  /* Colors: stroke */
  --color-stroke-outline: #bec7d2;
  --color-stroke-outline-variant: #d9dee4;

  /* Colors: primary */
  --color-primary-black: #000000;
  --color-on-primary-black: #ffffff;
  --color-primary-black-container: #e9ecf0;
  --color-on-primary-black-container: #4a4f5e;

  --color-primary-blue: #236ffa;
  --color-on-primary-blue: #ffffff;
  --color-primary-blue-container: #d8ecff;
  --color-on-primary-blue-container: #163b92;

  /* Colors: secondary and tertiary */
  --color-secondary-tussock: #93683b;
  --color-on-secondary-tussock: #ffffff;
  --color-secondary-tussock-container: #eee7d3;
  --color-on-secondary-tussock-container: #57392c;

  --color-tertiary-java: #0a9fb0;
  --color-tertiary-lavender: #4651e5;
  --color-tertiary-amethyst: #9d2af3;
  --color-tertiary-rose: #ea187e;
  --color-tertiary-orange: #f04906;

  /* Colors: feedback */
  --color-success: #3b9625;
  --color-on-success: #ffffff;
  --color-success-container: #e5f9df;
  --color-on-success-container: #244c1b;

  --color-warning: #f04906;
  --color-on-warning: #ffffff;
  --color-warning-container: #ffebd4;
  --color-on-warning-container: #7f260f;

  --color-error: #fc0606;
  --color-on-error: #ffffff;
  --color-error-container: #ffdddd;
  --color-on-error-container: #900c0c;

  /* State layers */
  --color-state-primary-blue-8: #ffffff14;
  --color-state-primary-blue-10: #ffffff1a;
  --color-state-primary-blue-48: #ffffff7a;
  --color-state-primary-container-blue-8: #163b9214;
  --color-state-primary-container-blue-10: #163b921a;
  --color-state-on-primary-blue-48: #236ffa7a;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-96: 96px;
  --spacing-128: 128px;
  --spacing-160: 160px;

  /* Radius */
  --radius-0: 0px;
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-24: 24px;
  --radius-32: 32px;
  --radius-40: 40px;
  --radius-full: 9999px;

  /* Elevation */
  --shadow-level-1: 0px 2px 16px rgba(0, 0, 0, 0.06);
  --shadow-level-2: 0px 6px 24px rgba(0, 0, 0, 0.08);
  --shadow-level-3: 0px 8px 40px rgba(0, 0, 0, 0.12);
  --shadow-level-4: 0px 0px 64px rgba(0, 0, 0, 0.18);

  /* Typography: desktop */
  --font-family-base: "Onest", sans-serif;
  --font-desktop-headline-l: 600 40px/48px var(--font-family-base);
  --font-desktop-headline-m: 600 32px/40px var(--font-family-base);
  --font-desktop-headline-s: 600 28px/32px var(--font-family-base);
  --font-desktop-headline-xs: 600 24px/28px var(--font-family-base);
  --font-desktop-title-l: 600 22px/28px var(--font-family-base);
  --font-desktop-title-m: 600 16px/22px var(--font-family-base);
  --font-desktop-title-s: 600 14px/20px var(--font-family-base);
  --font-desktop-label-l: 600 16px/24px var(--font-family-base);
  --font-desktop-label-m: 600 14px/20px var(--font-family-base);
  --font-desktop-label-s: 600 12px/16px var(--font-family-base);
  --font-desktop-body-l: 400 20px/24px var(--font-family-base);
  --font-desktop-body-m: 400 16px/24px var(--font-family-base);
  --font-desktop-body-s: 400 14px/20px var(--font-family-base);
  --font-desktop-body-xs: 400 12px/16px var(--font-family-base);

  /* Button presets */
  --button-height-56-padding-x: 32px;
  --button-height-56-padding-y: 16px;
  --button-height-44-padding-x: 24px;
  --button-height-44-padding-y: 12px;
  --button-height-32-padding-x: 20px;
  --button-height-32-padding-y: 8px;
}