/*
 * デザイントークン
 * 値の正は docs/design/design-tokens.md。ここは写しであり、勝手に変えない。
 */

:root {
  /* color */
  --ink-blue: #2054AC;
  --navy: #2A305D;
  --navy-mid: #364B75;
  --navy-deep: #141828;
  --gold: #EBB54D;
  --gold-dark: #9A6F1E;
  --ink: #211E1E;
  --ink-muted: #5B5856;
  --paper: #FFFFFF;
  --paper-alt: #F5F5F4;
  --line: rgba(33, 30, 30, .14);
  --line-invert: rgba(255, 255, 255, .20);
  --hero-grad: linear-gradient(200deg, #3E5786 0%, #141828 100%);

  /* type */
  --font-mincho: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-sans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-num: "EB Garamond", "Times New Roman", serif;

  --fs-display: clamp(1.9375rem, 6.6vw, 4.5rem);
  --fs-h1: clamp(2rem, 3.6vw, 3.25rem);
  --fs-h2: clamp(1.75rem, 3vw, 2.75rem);
  --fs-h3: clamp(1.125rem, 1.4vw, 1.375rem);
  --fs-lead: clamp(1rem, 1.3vw, 1.25rem);
  --fs-body: clamp(.9375rem, 1.05vw, 1rem);
  --fs-small: .8125rem;
  --fs-num-lg: clamp(3rem, 7vw, 6.5rem);
  --fs-num-sm: clamp(.875rem, 1.1vw, 1rem);

  --lh-display: 1.45;
  --lh-heading: 1.5;
  --lh-body: 1.9;
  --lh-tight: 1.2;
  --ls-display: .08em;
  --ls-heading: .05em;
  --ls-body: .02em;
  --ls-num: .06em;

  /* space */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;
  --sp-11: 160px;

  --section-y: clamp(96px, 12vw, 200px);
  --container: 1280px;
  --gutter: clamp(20px, 5vw, 80px);
  --grid-gap: clamp(16px, 2vw, 32px);
  --header-h: 72px;

  /* line / shape */
  --line-hair: 1px;
  --line-rule: 2px;
  --line-accent: 3px;
  --radius: 0;

  --angle-rule: 24deg;
  --angle-cut: 13deg;
  --angle-hero: 20deg;

  /* 刷毛の縁の高さ。素材は 2400x91。 */
  --brush-edge: 96px;

  /* motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 600ms;
}

@media (min-width: 1024px) {
  :root {
    --header-h: 96px;
  }
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}