@charset "UTF-8";
/* =====================================================================
   nzw.jp Design System — Design Tokens (Single Source of Truth)
   ---------------------------------------------------------------------
   配色・トーンは index.html を正式基準として標準化。
   全ページ共通で読み込み、CSS カスタムプロパティ (--nzw-*) を参照する。
   Tailwind 利用ページでも、非利用ページでも同じ値を使えるよう
   フレームワーク非依存の素の CSS 変数で定義する。

   使い方:
     <link rel="stylesheet" href="https://nzw.jp/static/css/design-system.css">
     color: var(--nzw-text);
     background: var(--nzw-accent);

   スタイルガイド: https://nzw.jp/static/design-system.html
   ===================================================================== */

:root {
  /* -----------------------------------------------------------------
     1. Color — Surface / 背景・面
     ----------------------------------------------------------------- */
  --nzw-bg:            #ffffff;  /* ページ背景 */
  --nzw-card:          #ffffff;  /* カード面 */
  --nzw-surface-1:     #f8fafc;  /* Slate 50  — わずかに沈んだ面 */
  --nzw-surface-2:     #f1f5f9;  /* Slate 100 — セクション区切り背景 */
  --nzw-surface-3:     #e2e8f0;  /* Slate 200 — さらに沈んだ面 */

  /* -----------------------------------------------------------------
     2. Color — Border / 罫線
     ----------------------------------------------------------------- */
  --nzw-border:        #e2e8f0;  /* Slate 200 — 標準の罫線 */
  --nzw-border-strong: #cbd5e1;  /* Slate 300 — 強調罫線 */
  --nzw-border-subtle: #f1f5f9;  /* Slate 100 — ごく薄い罫線 */

  /* -----------------------------------------------------------------
     3. Color — Text / 文字
     ----------------------------------------------------------------- */
  --nzw-text:          #1e293b;  /* Slate 800 — 本文 */
  --nzw-text-strong:   #0f172a;  /* Slate 900 — 見出し・強調 */
  --nzw-sub:           #64748b;  /* Slate 500 — 補助テキスト */
  --nzw-muted:         #94a3b8;  /* Slate 400 — キャプション・無効 */
  --nzw-on-accent:     #ffffff;  /* アクセント面上の文字 */

  /* -----------------------------------------------------------------
     4. Color — Accent (Sky) / アクセント = ブランド主色
     ----------------------------------------------------------------- */
  --nzw-accent:        #0ea5e9;  /* Sky 500 — 主アクセント */
  --nzw-accent-strong: #0284c7;  /* Sky 600 — hover / 押下 */
  --nzw-accent-deep:   #0369a1;  /* Sky 700 — 文字としてのアクセント */
  --nzw-accent-light:  #38bdf8;  /* Sky 400 — 明るいアクセント */
  --nzw-accent-soft:   #e0f2fe;  /* Sky 100 — バッジ・淡い背景 */
  --nzw-accent-bg:     #f0f9ff;  /* Sky 50  — hover 背景・極淡面 */

  /* -----------------------------------------------------------------
     5. Color — Secondary & Semantic / 副次・意味色
     ----------------------------------------------------------------- */
  --nzw-blue:          #2563eb;  /* Blue 600 — 補助リンク・第2系統 */
  --nzw-blue-strong:   #1d4ed8;  /* Blue 700 */

  --nzw-success:       #16a34a;  /* Green 600 */
  --nzw-success-soft:  #dcfce7;  /* Green 100 */
  --nzw-warning:       #f59e0b;  /* Amber 500 */
  --nzw-warning-light: #fbbf24;  /* Amber 400 */
  --nzw-warning-soft:  #fef3c7;  /* Amber 100 */
  --nzw-danger:        #f43f5e;  /* Rose 500 */
  --nzw-danger-soft:   #ffe4e6;  /* Rose 100 */

  /* -----------------------------------------------------------------
     6. Color — Brand accents / プロダクト別アクセント枠線
       (index.html の project-card 系で使用)
     ----------------------------------------------------------------- */
  --nzw-brand-indigo:  #6366f1;
  --nzw-brand-violet:  #8b5cf6;
  --nzw-brand-emerald: #10b981;
  --nzw-brand-amber:   #f59e0b;
  --nzw-brand-line:    #06c755;  /* LINE */

  /* -----------------------------------------------------------------
     7. Gradient / グラデーション
     ----------------------------------------------------------------- */
  --nzw-rainbow: linear-gradient(
      90deg,
      #ffb3b3, #ffd9b3, #ffffb3, #b3ffb3,
      #b3d9ff, #d9b3ff, #e6b3ff, #ffb3b3);
  --nzw-gradient-accent:
      linear-gradient(135deg, var(--nzw-accent-light), var(--nzw-accent-strong));
  --nzw-gradient-surface:
      linear-gradient(180deg, var(--nzw-bg), var(--nzw-surface-2));

  /* -----------------------------------------------------------------
     8. Typography — Font families / 書体
     ----------------------------------------------------------------- */
  --nzw-font-sans:    "Noto Sans JP", "Inter", system-ui, -apple-system, sans-serif;
  --nzw-font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
  --nzw-font-display: "Orbitron", var(--nzw-font-sans);   /* ロゴ・数値表現 */
  --nzw-font-game:    "Rajdhani", var(--nzw-font-sans);   /* ゲーム系UI   */

  /* -----------------------------------------------------------------
     9. Typography — Scale / 文字サイズ (1rem = 16px)
     ----------------------------------------------------------------- */
  --nzw-text-xs:   0.75rem;   /* 12px */
  --nzw-text-sm:   0.875rem;  /* 14px */
  --nzw-text-base: 1rem;      /* 16px */
  --nzw-text-lg:   1.125rem;  /* 18px */
  --nzw-text-xl:   1.25rem;   /* 20px */
  --nzw-text-2xl:  1.5rem;    /* 24px */
  --nzw-text-3xl:  1.875rem;  /* 30px */
  --nzw-text-4xl:  2.25rem;   /* 36px */
  --nzw-text-5xl:  3rem;      /* 48px */

  /* Weight & line-height */
  --nzw-weight-normal:   400;
  --nzw-weight-medium:   500;
  --nzw-weight-bold:     700;
  --nzw-weight-black:    900;
  --nzw-leading-tight:   1.25;
  --nzw-leading-normal:  1.6;
  --nzw-leading-relaxed: 1.8;

  /* -----------------------------------------------------------------
     10. Spacing / 余白 (4px グリッド)
     ----------------------------------------------------------------- */
  --nzw-space-1:  0.25rem;  /*  4px */
  --nzw-space-2:  0.5rem;   /*  8px */
  --nzw-space-3:  0.75rem;  /* 12px */
  --nzw-space-4:  1rem;     /* 16px */
  --nzw-space-5:  1.25rem;  /* 20px */
  --nzw-space-6:  1.5rem;   /* 24px */
  --nzw-space-8:  2rem;     /* 32px */
  --nzw-space-10: 2.5rem;   /* 40px */
  --nzw-space-12: 3rem;     /* 48px */
  --nzw-space-16: 4rem;     /* 64px */
  --nzw-space-20: 5rem;     /* 80px */

  /* -----------------------------------------------------------------
     11. Radius / 角丸
     ----------------------------------------------------------------- */
  --nzw-radius-xs:   2px;
  --nzw-radius-sm:   0.375rem;  /*  6px */
  --nzw-radius-md:   0.5rem;    /*  8px */
  --nzw-radius-lg:   0.75rem;   /* 12px (rounded-xl)  */
  --nzw-radius-xl:   1rem;      /* 16px (rounded-2xl) */
  --nzw-radius-full: 9999px;

  /* -----------------------------------------------------------------
     12. Shadow / 影
     ----------------------------------------------------------------- */
  --nzw-shadow-sm:   0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --nzw-shadow-md:   0 4px 6px -1px rgba(0, 0, 0, 0.1),
                     0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --nzw-shadow-lg:   0 10px 15px -3px rgba(0, 0, 0, 0.1),
                     0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --nzw-shadow-xl:   0 20px 25px -5px rgba(0, 0, 0, 0.1),
                     0 8px 10px -6px rgba(0, 0, 0, 0.1);
  /* アクセントの淡いグロー (index.html のカード hover で使用) */
  --nzw-shadow-accent: 0 10px 30px -5px rgba(14, 165, 233, 0.15),
                       inset 0 1px 0 rgba(255, 255, 255, 0.8);
  /* レトロ・オフセット影 (book / レトロUI 系) */
  --nzw-shadow-retro: 3px 3px 0 #d6d0c2;

  /* -----------------------------------------------------------------
     13. Motion / アニメーション
     ----------------------------------------------------------------- */
  --nzw-ease:          cubic-bezier(0.4, 0, 0.2, 1);
  --nzw-ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --nzw-duration-fast: 150ms;
  --nzw-duration:      300ms;
  --nzw-duration-slow: 500ms;
  --nzw-transition:    all var(--nzw-duration) var(--nzw-ease);

  /* -----------------------------------------------------------------
     14. Layout / レイアウト
     ----------------------------------------------------------------- */
  --nzw-container:     1120px;  /* コンテンツ最大幅 */
  --nzw-container-narrow: 768px;

  /* -----------------------------------------------------------------
     15. Z-index / 重なり順
     ----------------------------------------------------------------- */
  --nzw-z-base:    1;
  --nzw-z-header:  100;
  --nzw-z-overlay: 1000;
  --nzw-z-modal:   1100;
  --nzw-z-toast:   1200;
}

/* =====================================================================
   Keyframes — 共通アニメーション
   ===================================================================== */
@keyframes nzw-rainbow-flow {
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}
@keyframes nzw-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-20px); }
}
@keyframes nzw-spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* アクセシビリティ: 動きの抑制を希望するユーザーには共通アニメを停止 */
@media (prefers-reduced-motion: reduce) {
  .nzw-rainbow-line { animation: none; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* =====================================================================
   Optional component layer
   ---------------------------------------------------------------------
   すべて上記トークンのみで構築した、任意採用のベースクラス。
   採用は任意だが、新規ページはこれらを使うと統一が取りやすい。
   ===================================================================== */

/* Rainbow line — ヘッダー下/区切りの虹色ライン */
.nzw-rainbow-line {
  height: 4px;
  width: 100%;
  background: var(--nzw-rainbow);
  background-size: 400% 400%;
  animation: nzw-rainbow-flow 12s linear infinite;
  box-shadow: var(--nzw-shadow-sm);
}

/* Button */
.nzw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nzw-space-2);
  padding: var(--nzw-space-3) var(--nzw-space-6);
  font-family: var(--nzw-font-sans);
  font-size: var(--nzw-text-sm);
  font-weight: var(--nzw-weight-bold);
  line-height: 1;
  border-radius: var(--nzw-radius-full);
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--nzw-transition);
  text-decoration: none;
}
.nzw-btn--primary {
  /* 白文字を載せるため accent ではなく accent-strong を採用
     (#0ea5e9 は白文字で 2.77:1 と WCAG 不可。#0284c7 は 4.10:1 で大文字AA合格) */
  background: var(--nzw-accent-strong);
  color: var(--nzw-on-accent);
  box-shadow: var(--nzw-shadow-sm);
}
.nzw-btn--primary:hover {
  background: var(--nzw-accent-deep);
  box-shadow: var(--nzw-shadow-md);
  transform: translateY(-1px);
}
.nzw-btn--secondary {
  background: var(--nzw-card);
  color: var(--nzw-accent-deep);
  border-color: var(--nzw-border-strong);
  box-shadow: var(--nzw-shadow-sm);
}
.nzw-btn--secondary:hover {
  background: var(--nzw-accent-bg);
  box-shadow: var(--nzw-shadow-md);
}
.nzw-btn--ghost {
  background: transparent;
  color: var(--nzw-accent-deep);
}
.nzw-btn--ghost:hover {
  background: var(--nzw-accent-soft);
}

/* Card */
.nzw-card {
  background: var(--nzw-card);
  border: 1px solid var(--nzw-border);
  border-radius: var(--nzw-radius-xl);
  box-shadow: var(--nzw-shadow-sm);
  padding: var(--nzw-space-6);
  transition: var(--nzw-transition);
}
.nzw-card--hover:hover {
  box-shadow: var(--nzw-shadow-accent);
  transform: translateY(-4px);
}

/* Badge / Pill */
.nzw-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--nzw-space-1);
  padding: 0.2rem var(--nzw-space-3);
  font-size: var(--nzw-text-xs);
  font-weight: var(--nzw-weight-bold);
  line-height: 1.4;
  border-radius: var(--nzw-radius-full);
  color: var(--nzw-accent-deep);
  background: var(--nzw-accent-soft);
  border: 1px solid var(--nzw-accent-light);
}
.nzw-badge--success { color: var(--nzw-success); background: var(--nzw-success-soft); border-color: var(--nzw-success); }
.nzw-badge--warning { color: var(--nzw-warning); background: var(--nzw-warning-soft); border-color: var(--nzw-warning-light); }
.nzw-badge--danger  { color: var(--nzw-danger);  background: var(--nzw-danger-soft);  border-color: var(--nzw-danger); }

/* Surface helpers */
.nzw-surface       { background: var(--nzw-bg);        color: var(--nzw-text); }
.nzw-surface-muted { background: var(--nzw-surface-2); color: var(--nzw-text); }