@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;700&family=Inter:wght@400;600;700;800;900&family=Noto+Sans+JP:wght@400;500;700;800;900&family=Noto+Serif+JP:wght@600;700&display=swap");

/* MONOTEKO Design System — :root
   Source: https://monoteko-design-system.windsofgod21.chatgpt.site/#tokens
   Do not invent new color / space / radius values. */

:root {
  --mt-teal-950: #082f2b;
  --mt-teal-900: #0c4a42;
  --mt-teal-700: #177d70;
  --mt-teal-600: #1a8e7e;
  --mt-teal-100: #ddf2ed;
  --mt-teal-50: #eff9f6;
  --mt-graphite-950: #141c21;
  --mt-graphite-900: #20292e;
  --mt-graphite-700: #4b575d;
  --mt-graphite-600: #647076;
  --mt-graphite-300: #bfc7c9;
  --mt-graphite-200: #d8dedf;
  --mt-graphite-100: #ebeeee;
  --mt-warm-50: #f7f5f0;
  --mt-white: #fff;
  --mt-danger: #a84848;

  --mt-font-sans: "Noto Sans JP", Inter, "Yu Gothic", "Yu Gothic UI", Meiryo, sans-serif;
  --mt-font-serif: "Noto Serif JP", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  --mt-font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --mt-font: var(--mt-font-sans);
  --mt-mono: var(--mt-font-mono);
  --mt-shadow: 0 22px 50px #141c2114;

  --mt-space-1: 4px;
  --mt-space-2: 8px;
  --mt-space-3: 12px;
  --mt-space-4: 16px;
  --mt-space-6: 24px;
  --mt-space-8: 32px;
  --mt-space-12: 48px;
  --mt-space-16: 64px;
  --mt-radius-sm: 4px;
  --mt-radius-md: 8px;
  --mt-radius-lg: 12px;

  --mt-max: 1200px;
  --mt-gutter: 24px;
  --mt-page-gutter: 24px;
  --mt-page: min(var(--mt-max), calc(100% - (var(--mt-page-gutter) * 2)));
  /* Page lever = mark parallelogram: horizontal ends, sides Δx:Δy = 2:3. */
  --mt-lever-skew: -33.690067526deg;
  --mt-lever-thickness: 48px;
  --mt-lever-inset-right: 64px;
}

@media (max-width: 720px) {
  :root {
    --mt-page-gutter: 20px;
    --mt-lever-thickness: 36px;
    --mt-lever-inset-right: 28px;
  }
}