:root {
  --of-color-ink: #1D1D1A;
  --of-color-paper: #F6F4ED;
  --of-color-surface: #FFFEF9;
  --of-color-line: #DEDAD0;
  --of-color-soft: #E8E5DD;
  --of-color-muted: #706D66;
  --of-color-acid: #DDEF68;
  --of-color-lilac: #C8C0F0;
  --of-color-peach: #F2AC92;
  --of-color-blue: #95AFE5;
  --of-color-mint: #B7D9C5;
  --of-color-danger: #C54635;
  --of-color-white: #FFFFFF;
  --of-color-black: #000000;

  --of-radius-sm: 12px;
  --of-radius-md: 18px;
  --of-radius-lg: 26px;
  --of-radius-xl: 34px;
  --of-radius-pill: 999px;

  --of-space-xs: 6px;
  --of-space-sm: 10px;
  --of-space-md: 16px;
  --of-space-lg: 22px;
  --of-space-xl: 30px;
  --of-space-xxl: 42px;

  --of-type-eyebrow-size: 9px;
  --of-type-eyebrow-leading: 13px;
  --of-type-eyebrow-tracking: 1.2px;
  --of-type-caption-size: 11px;
  --of-type-caption-leading: 16px;
  --of-type-body-small-size: 12px;
  --of-type-body-small-leading: 18px;
  --of-type-body-size: 14px;
  --of-type-body-leading: 21px;
  --of-type-body-large-size: 16px;
  --of-type-body-large-leading: 24px;
  --of-type-title-size: 21px;
  --of-type-title-leading: 27px;
  --of-type-headline-size: 27px;
  --of-type-headline-leading: 33px;
  --of-type-hero-size: 32px;
  --of-type-hero-leading: 38px;

  --of-motion-fast: 120ms;
  --of-motion-base: 220ms;
  --of-motion-slow: 380ms;
  --of-motion-press-scale: 0.96;
  --of-motion-press-scale-large: 0.98;
  --of-motion-press-opacity: 0.72;

  --of-shadow-none: none;
  --of-shadow-raised-color: #000000;
  --of-shadow-raised-opacity: 0.06;
  --of-shadow-raised-radius: 8px;
  --of-shadow-raised-offset-x: 0px;
  --of-shadow-raised-offset-y: 2px;
  --of-shadow-raised-elevation: 2;
  --of-shadow-floating-color: #000000;
  --of-shadow-floating-opacity: 0.12;
  --of-shadow-floating-radius: 20px;
  --of-shadow-floating-offset-x: 0px;
  --of-shadow-floating-offset-y: 8px;
  --of-shadow-floating-elevation: 8;

  --of-touch-target: 44px;
}