:root {
  --color-paper: #faf7ef;
  --color-paper-deep: #eee9dc;
  --color-ink: #293e38;
  --color-ink-soft: #5c675e;
  --color-teal: #315e50;
  --color-teal-soft: #d8ebe6;
  --color-red: #985644;
  --color-red-soft: #f3dde0;
  --color-amethyst: #766079;
  --color-amethyst-soft: #e9e0ed;
  --color-gold: #896d35;
  --color-gold-soft: #eee3c8;
  --color-white: #ffffff;
  --color-shadow: rgb(54 61 57 / 14%);
  --color-overlay: rgb(251 248 238 / 94%);

  --font-serif: "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", Georgia, serif;
  --font-sans: "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;

  --space-1: clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem);
  --space-2: clamp(0.5rem, 0.4rem + 0.4vw, 0.8rem);
  --space-3: clamp(0.75rem, 0.6rem + 0.65vw, 1.25rem);
  --space-4: clamp(1rem, 0.75rem + 1vw, 1.75rem);
  --space-5: clamp(1.4rem, 1rem + 1.5vw, 2.5rem);
  --space-6: clamp(2rem, 1.25rem + 2.5vw, 4rem);

  --radius-small: 0.45rem;
  --radius-medium: 1rem;
  --radius-large: 1.75rem;
  --border-soft: 1px solid rgb(47 119 114 / 24%);
  --shadow-paper: 0 1rem 3rem var(--color-shadow);
  --content-wide: 76rem;
  --content-reader: 46rem;
  --tap-size: 2.75rem;
  --header-height: auto;
  --admin-bar-offset: 0px;
  --carino-viewport-height: 100vh;
  --carino-paper-texture: linear-gradient(transparent, transparent);

  --duration-fast: 140ms;
  --duration-normal: 260ms;
  --ease-watercolor: cubic-bezier(0.22, 0.8, 0.28, 1);
}

@supports (height: 100svh) {
  :root {
    --carino-viewport-height: 100svh;
  }
}

@supports (height: 100dvh) {
  :root {
    --carino-viewport-height: 100dvh;
  }
}