/* JWA design tokens: shared by all pages and future WordPress templates. */
:root {
  /* ── カラー（D5-noir パレット） ── */
  --ink:          #0a0a0f;
  --ink-2:        #1a1a24;
  --ink-soft:     #4a4a58;
  --slate:        #0a0a0f;
  --slate-2:      #1a1a24;
  --paper:        #ffffff;
  --paper-2:      #f4f4f6;
  --paper-3:      #e7e7eb;
  --line:         #d6d6dc;
  --line-soft:    #ebebef;
  --accent:       #3a4cff;      /* JWAブルー */
  --accent-2:     #2735d6;      /* hover state */
  --accent-soft:  #eef0ff;
  --gold:         #c8a96e;      /* サブアクセント */
  --success:      #1a8c5c;
  --warning:      #c47a1e;
  --cta-silver: #eef1f7;
  --cta-mint: #dceeff;
  --cta-blue: #c9e5fa;
  --error:        #c0392b;

  /* ── タイポグラフィ ── */
  --display:   "Barlow", sans-serif;
  --sans:      "Barlow", "Noto Sans JP", sans-serif;
  --sans-jp:   "Noto Sans JP", sans-serif;
  --script:    "Caveat", cursive;

  /* ── フォントサイズ ── */
  --font-size-xs:   0.75rem;    /* 12px */
  --font-size-sm:   0.875rem;   /* 14px */
  --font-size-base: 1rem;       /* 16px */
  --font-size-lg:   1.125rem;   /* 18px */
  --font-size-xl:   1.25rem;    /* 20px */
  --font-size-2xl:  1.5rem;     /* 24px */
  --font-size-3xl:  1.875rem;   /* 30px */
  --font-size-4xl:  2.25rem;    /* 36px */
  --font-size-display: 2rem;    /* 32px — date/number display 用 */
  /* ⚠️ clamp() の最小値は必ず 0.75rem（12px）以上を維持すること（WCAG 1.4.4） */

  /* ── フォントウェイト ── */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;

  /* ── 行間・字間 ── */
  --leading-tight:  1.25;
  --leading-base:   1.75;
  --leading-loose:  1.9;
  --tracking-tight: -0.02em;
  --tracking-base:   0.01em;
  --tracking-wide:   0.06em;
  --tracking-wider:  0.15em;

  /* ── スペーシング（8px基準） ── */
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.5rem;    /* 24px */
  --space-6:  2rem;      /* 32px */
  --space-7:  2.5rem;    /* 40px */
  --space-8:  3rem;      /* 48px */
  --space-10: 4rem;      /* 64px */
  --space-12: 5rem;      /* 80px */
  --space-16: 6rem;      /* 96px */

  --hero-title-size: clamp(2rem, 4.5vw, 3.75rem);
  --hero-bg: #080d20;
  --hero-accent: #9eacff;
  --hero-shade: rgba(8, 13, 32, 0.82);
  --hero-shade-mid: rgba(8, 13, 32, 0.62);
  --hero-shade-edge: rgba(8, 13, 32, 0.30);
  --network-line: #b2bdf4;
  --network-node: #3a4cff;

  /* ── レイアウト ── */
  --container-max:    940px;
  --container-frame:  1040px;
  --container-narrow: var(--container-max);
  --header-height:    80px;

  /* ── ボーダー半径 ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 9999px;
  --radius-circle: 50%;

  /* ── シャドウ ── */
  --shadow-sm:  0 1px 4px rgba(10,10,15,0.06);
  --shadow-md:  0 4px 16px rgba(10,10,15,0.10);
  --shadow-lg:  0 12px 40px rgba(10,10,15,0.14);

  /* ── トランジション ── */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;

  /* ── 半透明白（ダーク背景上のテキスト用） ── */
  --paper-alpha-05: rgba(255, 255, 255, 0.05);
  --paper-alpha-07: rgba(255, 255, 255, 0.07);
  --paper-alpha-10: rgba(255,255,255,0.10);
  --paper-alpha-14: rgba(255, 255, 255, 0.14);
  --paper-alpha-15: rgba(255, 255, 255, 0.15);
  --paper-alpha-30: rgba(255,255,255,0.30);
  --paper-alpha-35: rgba(255, 255, 255, 0.35);
  --paper-alpha-40: rgba(255,255,255,0.40);
  --paper-alpha-50: rgba(255,255,255,0.50);
  --paper-alpha-55: rgba(255,255,255,0.55);
  --paper-alpha-65: rgba(255, 255, 255, 0.65);
  --paper-alpha-70: rgba(255,255,255,0.70);
  --paper-alpha-75: rgba(255,255,255,0.75);
  --paper-alpha-80: rgba(255,255,255,0.80);
  --accent-alpha-06: rgba(58, 76, 255, 0.06);
  --gold-alpha-06: rgba(200, 169, 110, 0.06);
  --blue-alpha-18: rgba(10, 31, 140, 0.18);
  --accent-alpha-15: rgba(58, 76, 255, 0.15);
  --accent-alpha-12: rgba(58, 76, 255, 0.12);
  --gold-alpha-08: rgba(200, 169, 110, 0.08);
  --accent-alpha-30: rgba(58, 76, 255, 0.3);
}