:root {
  color-scheme: light;

  --paper-0: #f4f7f9;
  --paper-1: #ffffff;
  --paper-2: #edf2f5;
  --ink-0: #17232d;
  --ink-1: #344653;
  --ink-2: #6b7b87;
  --line: #d7e0e6;

  --brand-oxide: #17658f;
  --brand-nile: #0d7a73;
  --brand-signal: #d49a22;
  --brand-deep: #164f70;

  --success: #21845a;
  --warning: #ad7414;
  --danger: #b7443d;

  --shadow-1: 0 1px 2px rgba(23, 35, 45, .08);
  --shadow-2: 0 14px 34px rgba(23, 35, 45, .10);

  --radius-xs: 3px;
  --radius-sm: 7px;
  --radius-md: 12px;
  --radius-lg: 20px;

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 7rem;

  --text-xs: .76rem;
  --text-sm: .9rem;
  --text-md: 1rem;
  --text-lg: 1.2rem;
  --text-xl: clamp(1.45rem, 2vw, 2rem);
  --text-2xl: clamp(2.2rem, 5vw, 5rem);
  --text-display: clamp(3.6rem, 11vw, 10rem);

  --content-max: 1320px;
  --reading-max: 760px;

  --motion-fast: 120ms;
  --motion-normal: 220ms;
  --motion-slow: 420ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-snap: cubic-bezier(.25, 1, .5, 1);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --paper-0: #10161b;
  --paper-1: #161e24;
  --paper-2: #202b32;
  --ink-0: #f2f6f8;
  --ink-1: #d4dde2;
  --ink-2: #9aa9b3;
  --line: #34424b;

  --brand-oxide: #62a9cf;
  --brand-nile: #5eb5ad;
  --brand-signal: #e1b24b;
  --brand-deep: #8dc2df;

  --success: #69b98d;
  --warning: #ddb25e;
  --danger: #df7b74;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .32);
  --shadow-2: 0 14px 34px rgba(0, 0, 0, .28);
}