/* ============================================================
   Design Tokens — 同人作品紹介サイト
   ============================================================ */

:root {
  /* Base */
  --color-base:       #f7f8fa;
  --color-surface:    #ffffff;
  --color-border:     #e2e8f0;
  --color-text:       #1a202c;
  --color-text-muted: #64748b;
  --color-text-light: #94a3b8;

  /* Main — 落ち着いたインディゴ */
  --color-main:       #2c5282;
  --color-main-dark:  #1a365d;
  --color-main-light: #ebf4ff;

  /* Accent — カテゴリー差し色 */
  --color-accent:           var(--color-main);
  --color-accent-doujin:    #e67e22;
  --color-accent-game:      #3498db;
  --color-accent-voice:     #9b59b6;
  --color-accent-illust:     #27ae60;
  --color-accent-feature:   #e74c3c;

  /* Platform brand (軽く使用) */
  --color-fanza:   #e4007f;
  --color-dlsite:  #0068b7;
  --color-fantia:  #009688;

  /* Typography */
  --font-sans:     "Noto Sans JP", sans-serif;
  --font-heading:  "Zen Kaku Gothic New", sans-serif;
  --font-size-xs:   0.75rem;
  --font-size-sm:   0.875rem;
  --font-size-base: 1rem;
  --font-size-lg:   1.125rem;
  --font-size-xl:   1.25rem;
  --font-size-2xl:  1.5rem;
  --font-size-3xl:  1.875rem;
  --font-size-4xl:  2.25rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold:   700;
  --line-height-tight:  1.3;
  --line-height-normal: 1.7;

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Layout */
  --container-max:  1200px;
  --container-narrow: 800px;
  --header-height:  72px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.10);
  --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.12);
  --transition: 0.2s ease;
}

/* カテゴリー別アクセント切替 */
body.category-doujin,
body.cat-doujin    { --color-accent: var(--color-accent-doujin); }
body.category-game,
body.cat-game      { --color-accent: var(--color-accent-game); }
body.category-voice,
body.cat-voice     { --color-accent: var(--color-accent-voice); }
body.category-illust,
body.cat-illust    { --color-accent: var(--color-accent-illust); }
body.category-feature,
body.cat-feature   { --color-accent: var(--color-accent-feature); }

/* ============================================================
   Typography roles
   ============================================================ */

/* 本文 — Noto Sans JP Regular */
body,
p,
li,
label,
input,
textarea,
button,
.article-content,
.article-content p,
.article-content li,
.work-card__creator,
.hero__sub,
.hero__search-hint,
.hero__featured-creator,
.work-card__cta,
.section__link,
.breadcrumb,
.footer-brand__desc,
.static-page__lead,
.contact-box__note {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-normal);
}

/* 見出し — Zen Kaku Gothic New */
h1, h2, h3, h4, h5, h6,
.site-logo > span,
.footer-brand__name,
.hero__catch,
.hero__featured-title,
.section__title,
.page-header__title,
.article-header__title,
.static-page__title,
.work-card__title,
.feature-banner__title,
.related-posts__title,
.creator-card__name,
.cat-card__name,
.badge--category,
.global-nav a,
.mobile-cat-tabs__link,
.hero__featured-label,
.hero-slider__arrow,
.footer-nav__title,
.static-page__nav-title,
.purchase-box__title {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
}