/**
 * Chronote Design Tokens
 *
 * 単一の真実（Single Source of Truth）として、Chronote会員エリア・LP・
 * 書籍ビューアーで使用されるすべてのデザイン値を定義する。
 *
 * 詳細な設計方針は docs/ui-revamp-plan.md §6.0 を参照。
 *
 * 命名規則:
 *   --cn-{category}-{variant}
 *
 * SWELL橋渡し変数:
 *   var(--swl-*, fallback) 形式で受け、--cn-* に名前空間化する。
 *   プラグイン側CSSから var(--swl-*) を直接書かないこと。
 */

:root {

    /* ===== Surface（背景・面） ===== */
    --cn-bg:               #fbf8f3;  /* ページ背景：温かい紙色 */
    --cn-bg-alt:           #f9f9f9;  /* 副次的な背景（リストのhover等） */
    --cn-surface:          #ffffff;  /* カード・モーダル背景 */
    --cn-surface-2:        #f5efe1;  /* テーブル見出し・サブカード */
    --cn-surface-3:        #f5f2e8;  /* セクション区切り背景 */
    --cn-surface-warm-1:   #fffef9;  /* v07 paper 用 */
    --cn-surface-warm-2:   #f8f9fa;  /* 汎用淡色背景 */
    --cn-surface-warm-3:   #fafafa;  /* 汎用さらに淡色 */
    --cn-surface-overlay:  rgba(0, 0, 0, 0.5);

    /* ===== Ink（テキスト） ===== */
    --cn-ink:              #1a1814;  /* 本文・タイトル（最も濃い） */
    --cn-ink-2:            #4a443c;  /* サブテキスト */
    --cn-ink-3:            #5c544a;  /* メタ情報（WCAG AA 4.5:1 確保） */
    --cn-ink-on-dark:      #ffffff;  /* 暗背景上のテキスト */
    --cn-ink-mute:         #6c757d;  /* 控えめなラベル（互換用） */
    --cn-ink-disabled:     #9ca3af;  /* 無効状態 */

    /* ===== Line（罫線・境界） ===== */
    --cn-line:             #e6dfd3;  /* 標準ボーダー */
    --cn-line-2:           #d8cebc;  /* 強めのボーダー */
    --cn-line-3:           #d4c5b9;  /* v07 ブック向けボーダー */
    --cn-line-soft:        #e5e5e5;  /* 汎用淡色ライン */
    --cn-line-softer:      #eeeeee;  /* さらに淡色 */

    /* ===== Brand & Accent ===== */
    --cn-accent:           #8B7355;  /* Chronote ブランド：温かみブラウン */
    --cn-accent-2:         #A38A6F;  /* ブランド派生：明るめ */
    --cn-accent-3:         #C9A876;  /* ブランド派生：さらに明るめ */
    /* 強調アクション（修正依頼・お見積もり等、通常導線と差別化したい場面）。
       旧名: --cn-premium-* — 会員レベル分けが未実装のため意味ベースに改名（2026-04-28） */
    --cn-emphasis:          linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --cn-emphasis-solid:    #764ba2;  /* グラデが使えない場面のフォールバック */
    --cn-emphasis-solid-2:  #667eea;  /* グラデ start カラー */
    --cn-emphasis-strong:   #5a3680;  /* 濃いダーク紫 */
    --cn-emphasis-light:    #c0a8e0;  /* 装飾用の淡い紫 */
    --cn-emphasis-soft:     #f0ebf5;  /* 紫淡色背景（manual/pricingで多用） */
    --cn-emphasis-soft-2:   #faf6ff;  /* さらに淡い紫背景 */
    --cn-emphasis-soft-3:   #e8eaf6;  /* グラデend用の淡い青紫 */

    /* ===== Warm（フロント/ガイド/料金/テンプレ/コンタクトの温かみトーン） ===== */
    --cn-warm-bg:          #f9f6f2;  /* ページ背景 */
    --cn-warm-line:        #cdc4b7;
    --cn-warm-line-2:      #d8d0c5;
    --cn-warm-surface:     #e8e4df;
    --cn-warm-surface-2:   #e0dbd5;
    --cn-warm-surface-3:   #f5f3f0;

    /* ===== Status（状態色） ===== */
    --cn-success:          #28a745;
    --cn-success-strong:   #155724;
    --cn-success-bg:       #d4edda;
    --cn-success-soft:     #e8f5e9;

    --cn-warn:             #f59e0b;
    --cn-warn-2:           #d69e2e;  /* 容量メーター黄・注意ラベル用 */
    --cn-warn-strong:      #856404;
    --cn-warn-bg:          #fff3cd;
    --cn-warn-soft:        #fff3e0;

    --cn-danger:           #dc2626;
    --cn-danger-strong:    #721c24;
    --cn-danger-bg:        #f8d7da;
    --cn-danger-soft:      #fee2e2;

    --cn-info:             #2196F3;
    --cn-info-strong:      #0c5460;
    --cn-info-bg:          #d1ecf1;

    /* ===== Shape（角丸・サイズ） ===== */
    --cn-radius-sm:        4px;
    --cn-radius-md:        8px;
    --cn-radius-lg:        12px;
    --cn-radius-pill:      999px;

    /* ===== Typography（フォントサイズ） ===== */
    --cn-fs-meta:          13px;
    --cn-fs-body:          15px;
    --cn-fs-body-l:        16px;
    --cn-fs-section:       18px;
    --cn-fs-title:         24px;
    --cn-fs-page:          28px;

    /* ===== Shadow ===== */
    --cn-shadow-sm:        0 1px 2px rgba(0, 0, 0, 0.05);
    --cn-shadow-md:        0 2px 4px rgba(0, 0, 0, 0.08);
    --cn-shadow-lg:        0 4px 12px rgba(0, 0, 0, 0.12);

    /* ===== SWELL橋渡し変数（fallback必須） ===== */
    --cn-brand-logo-color: var(--swl-clr-main, #1a1814);
    --cn-link-color:       var(--swl-clr-link, #8B7355);
}