/* =============================================================
   SHIRUBE — tokens.css
   デザイントークン (color / font / layout / radius / shadow / timing)
   ============================================================= */

:root {
  /* Color */
  --color-bg: #FFFFFF;
  --color-bg-soft: #F6F6F4;
  --color-text: #1A1A1A;
  --color-text-sub: #6B6B6B;
  --color-accent: #FFC72C;
  --color-accent-soft: #FFF3CC;
  --color-link: #2563EB;
  --color-footer: #111111;
  --color-border: #1A1A1A;

  /* Font */
  --font-display: 'Anton', 'Noto Sans JP', system-ui, sans-serif;
  --font-body: 'Noto Sans JP', system-ui, -apple-system, 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --font-accent: 'Caveat', cursive;

  /* Layout */
  --content-max: 1200px;
  --unit: 8px;
  --section-gap: 128px;
  --card-gap: 32px;

  /* Radius */
  --r-card: 16px;
  --r-footer: 40px;
  --r-pill: 9999px;

  /* Shadow (ネオブルータリズム) */
  --shadow-nb: 4px 4px 0 var(--color-border);
  --shadow-nb-hover: 8px 8px 0 var(--color-accent);

  /* Timing */
  --t-fast: .2s;
  --t-base: .3s;
  --t-slow: .6s;
  --ease: cubic-bezier(.2, .7, .3, 1);
}

@media (max-width: 767px) {
  :root {
    --section-gap: 80px;
    --card-gap: 20px;
  }
}