:root{
  /* Neutrals */
  --bg: #F7F4EF;
  --surface: #FFFFFF;
  --surface-2: #F1ECE4;
  --border: #E6E0D8;

  /* Text */
  --text: #1F2933;
  --text-muted: #52606D;
  --text-faint: #7B8794;

  /* Accent */
  --accent: #B7791F;
  --accent-soft: #F2D6A2;
  --accent-ink: #3B2A12;

  /* Layout */
  --radius: 14px;
  --radius-sm: 10px;

  --shadow-sm: 0 1px 2px rgba(31,41,51,.06), 0 2px 10px rgba(31,41,51,.04);
  --shadow-md: 0 8px 28px rgba(31,41,51,.10);

  /* Container */
  --container: 1120px;

  /* Spacing */
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 18px;
  --space-5: 26px;
  --space-6: 40px;

  /* Typography */
  --font-sans: ui-sans-serif, system-ui, "Noto Sans JP", sans-serif;
  --font-serif: "Noto Serif JP", serif;

  --line: 1.85;

  /* Font scale */
  --root-font-size: 16px;
  --entry-font-size: 1rem;
  --h1-size: clamp(1.9rem, 3vw, 2.6rem);
  --h2-size: clamp(1.35rem, 2vw, 1.75rem);
}

/* Tablet */
@media (min-width: 768px){
  :root{
    --container: 1240px;
    --root-font-size: 17px;
    --entry-font-size: 1.06rem;
    --h1-size: clamp(2.2rem, 3.2vw, 3rem);
    --h2-size: clamp(1.5rem, 2.2vw, 1.9rem);
  }
}

/* PC */
@media (min-width: 1024px){
  :root{
    --container: 1320px;
    --root-font-size: 18px;
    --entry-font-size: 1.1rem;
    --h1-size: clamp(2.4rem, 3.3vw, 3.2rem);
    --h2-size: clamp(1.6rem, 2.3vw, 2rem);

    --space-5: 30px;
    --space-6: 52px;
  }
}