/* ============================================================
   KOZAROCKS 2026 — Design Tokens
   現行サイト (kozarocks2026.koza.rocks / kozarocks_sideevent.html) から抽出。
   すべての色・余白・タイポはここで定義する。直値(#xxxxxx, 24px 等)を
   コンポーネント側に書かず、必ず var(--token) を参照すること。
   ============================================================ */

:root {
  /* ---------- Color : Base (紫) ---------- */
  --lp-bg:            #28195A;  /* ページ標準背景・メインベース */
  --lp-bg-dark:       #08061E;  /* 最暗部 / ヒーロー地色 */
  --lp-purple:        #28195A;
  --lp-purple-mid:    #3D2C76;  /* セクション交互背景 */
  --lp-purple-light:  #523A91;
  --lp-card-bg:       #3E2E78;  /* カード地色 */
  --lp-cta-bg:        #9F4EAB;  /* 補助CTA・装飾紫 */

  /* ---------- Color : Accent (ネオン2色対比) ---------- */
  --lp-pink:          #E50065;  /* サブアクセント / ROCK軸・衝動 */
  --lp-pink-light:    #CF0D6E;
  --lp-teal:          #00AFA0;  /* 第2アクセント / 開化・未来 */
  --lp-teal-bright:   #00E5CC;  /* グロー・ホバー文字 */

  /* ---------- Color : Support ---------- */
  --koza-white:       #EFEDEF;  /* on-dark の主テキスト */
  --koza-gold:        #C59F64;  /* 英語サブ見出し・上品な差し色 */
  --koza-bordeaux:    #8D3D44;

  /* ---------- Color : Text alpha (on dark) ---------- */
  --text-strong:      var(--koza-white);
  --text-body:        rgba(239, 237, 239, 0.80);
  --text-muted:       rgba(239, 237, 239, 0.55);
  --hairline:         rgba(239, 237, 239, 0.12);

  /* ---------- Signature gradient ---------- */
  /* ロゴ下のライン・ナビ上端などブランドの象徴。順序を変えない。 */
  --grad-brand: linear-gradient(270deg, var(--lp-purple), var(--lp-teal) 17%, var(--lp-pink-light));

  /* ---------- Typography : Family ---------- */
  --font-display: 'Anton', 'Noto Sans JP', sans-serif;        /* 英数字の極太見出し */
  --font-serif:   'Noto Serif JP', 'Yu Mincho', serif;        /* 和文見出し・ラベル */
  --font-body:    'Noto Sans JP', 'Inter', sans-serif;        /* 本文 */
  --font-mono:    'Inter', monospace;

  /* ---------- Typography : Scale (clamp で流体) ---------- */
  --fs-display: clamp(40px, 8vw, 96px);   /* ページ主役の英数字 */
  --fs-h1:      clamp(28px, 5vw, 48px);
  --fs-h2:      clamp(26px, 4vw, 38px);   /* = .sec-title */
  --fs-h3:      clamp(18px, 2.4vw, 24px);
  --fs-lead:    clamp(15px, 2vw, 18px);
  --fs-body:    clamp(14px, 1.8vw, 16px);
  --fs-label:   16px;
  --fs-caption: 16px;

  --lh-tight:  1.25;
  --lh-head:   1.4;
  --lh-body:   1.8;
  --ls-base:   0.1em;     /* body 標準字間 */
  --ls-label:  4px;       /* ラベル・英語キャプションの開いた字間 */

  /* ---------- Spacing scale (8pt 基調) ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  36px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  88px;          /* セクション標準上下 padding */

  /* ---------- Layout ---------- */
  --container:    1080px;
  --section-pad:  88px 24px;

  /* ---------- Radius (KOZAROCKSは原則 角丸0 = シャープ) ---------- */
  --radius-0: 0;
  --radius-sm: 2px;       /* どうしても丸めたい時の最小値 */

  /* ---------- Shadow : ハードオフセット影 (ブランドの肝) ---------- */
  /* 影をぼかさず色付きでズラす = ネオンブルータリズム。色はアクセント2色。 */
  --shadow-hard-sm: 4px 5px 0 var(--lp-pink);
  --shadow-hard-md: 6px 7px 0 var(--lp-pink), 0 10px 28px rgba(0, 0, 0, 0.45);
  --shadow-soft:    0 10px 28px rgba(0, 0, 0, 0.45);
  --glow-teal:      0 0 8px rgba(0, 175, 160, 0.5);

  /* ---------- Motion ---------- */
  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:   0.15s;
  --dur-base:   0.3s;
  --dur-reveal: 0.7s;

  /* ---------- Z-index ---------- */
  --z-nav:    100;
  --z-modal:  300;
}