:root {
  color-scheme: light;
  --orange: #F36B21;
  --orange-soft: #FFF0E3;
  --orange-ink: #9C410D;
  --yellow: #FFC928;
  --yellow-soft: #FFF4CA;
  --yellow-ink: #725400;
  --blue: #79C9DC;
  --blue-soft: #E5F4F8;
  --blue-ink: #155A75;
  --green: #57A946;
  --green-soft: #E8F4E9;
  --green-ink: #25623C;
  --paper: #FFF9EF;
  --surface: #FFFFFF;
  --ink: #233746;
  --muted: #50616B;
  --line: #DDDCD3;
  --control-line: #697A83;
  --font: "Trebuchet MS", Arial, sans-serif;
  --regular: 400;
  --bold: 700;
  --text: 1rem;
  --text-small: .875rem;
  --text-lg: 1.125rem;
  --title-sm: 1.5rem;
  --title: clamp(2rem, 5vw, 3rem);
  --brand-size: 2rem;
  --leading: 1.6;
  --heading-leading: 1.15;
  --s1: .25rem;
  --s2: .5rem;
  --s3: .75rem;
  --s4: 1rem;
  --s6: 1.5rem;
  --s8: 2rem;
  --s12: 3rem;
  --s16: 4rem;
  --radius-sm: .5rem;
  --radius: 1rem;
  --radius-lg: 1.75rem;
  --radius-leaf: 80% 0 80% 0;
  --radius-hero: 1.75rem 1.75rem 4rem 1.75rem;
  --radius-sun: 50%;
  --pill: 999px;
  --touch: 2.75rem;
  --page: 70rem;
  --auth: 30rem;
  --form-width: 42rem;
  --filter-width: 10rem;
  --decoration: 11rem;
  --leaf-width: 5rem;
  --leaf-height: 2.5rem;
  --border: 1px;
  --accent: .25rem;
  --focus: 3px;
  --focus-gap: 3px;
  --shadow: 0 .25rem 0 var(--line);
  --letter-spacing: .08em;
  --leaf-angle: -25deg;
}