/**
 * Chronote Design Tokens v2 — リデザイン2026
 *
 * v1 (tokens.css) との差分:
 *   1. 強調色: 紫グラデ全廃 → ボルドー #8a2b3d 単色（R0で確定・WCAG実測 AA）
 *   2. 影: ニュートラル黒 → 温かみのある2段階（色付き影・多層影は禁止）
 *   3. フォント変数を新設（--cn-font-sans / --cn-font-serif）。
 *      消費側は var(--cn-font-sans, <旧スタック>) で参照し、v1ロールバック時は
 *      変数未定義 → 旧スタックにフォールバックする
 *   4. 末尾にフロントUI用 dashicons → 線画SVG上書きを同梱
 *      （トークンが読まれる場所に必ずアイコンも効かせるための同居。管理バーは除外）
 *
 * 切替: digital-book-core の CN_DESIGN_V2 定数（既定ON）。
 *       wp-config.php で define('CN_DESIGN_V2', false) すると v1 に即時ロールバック。
 * 設計資料: docs/redesign-2026-plan.md / docs/redesign-2026/r0/styleguide.html
 */

:root {

    /* ===== Surface（背景・面） ===== */
    --cn-bg:               #fbf8f3;
    --cn-bg-alt:           #f9f9f9;
    --cn-surface:          #ffffff;
    --cn-surface-2:        #f5efe1;
    --cn-surface-3:        #f5f2e8;
    --cn-surface-warm-1:   #fffef9;
    --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;
    --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;
    --cn-line-soft:        #e5e5e5;
    --cn-line-softer:      #eeeeee;

    /* ===== Brand & Accent ===== */
    --cn-accent:           #8B7355;  /* ブランド茶 — 装飾専用（文字 4.16:1 で AA 未達） */
    --cn-accent-2:         #A38A6F;
    --cn-accent-3:         #C9A876;

    /* 強調アクション: ボルドー（装丁の深紅）。
       文字 on 生成り 7.82:1 AA / 白文字 on ボルドー 8.42:1 AA（実測）。
       グラデーションは v2 で全廃 — --cn-emphasis も単色。 */
    --cn-emphasis:          #8a2b3d;
    --cn-emphasis-solid:    #8a2b3d;
    --cn-emphasis-solid-2:  #8a2b3d;  /* 旧グラデstart(青紫)の後継 — ボルドーに統合 */
    --cn-emphasis-strong:   #6e2030;  /* hover・濃色（白文字 10.98:1 AA） */
    --cn-emphasis-light:    #d9aab6;  /* 装飾用の淡色（文字使用禁止） */
    --cn-emphasis-soft:     #f6e9ec;  /* 淡色背景 */
    --cn-emphasis-soft-2:   #fbf5f7;  /* さらに淡い背景 */
    --cn-emphasis-soft-3:   #f1e0e5;  /* 旧グラデ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（v2: 彩度を落とし生成り×ボルドーに馴染む色調へ） ===== */
    --cn-success:          #1a7a43;
    --cn-success-strong:   #17603a;
    --cn-success-bg:       #e7f2ea;
    --cn-success-soft:     #eef5f0;

    --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;

    /* v2新設: 書体（見出し=明朝 / 本文=ゴシック に全サイト統一） */
    --cn-font-sans:        "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
    --cn-font-serif:       "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "游明朝", serif;

    /* ===== Shadow（2段階のみ・色付き影禁止） ===== */
    --cn-shadow-sm:        0 1px 2px rgba(38, 33, 26, 0.06);
    --cn-shadow-md:        0 1px 3px rgba(38, 33, 26, 0.08);
    --cn-shadow-lg:        0 6px 20px rgba(38, 33, 26, 0.07);

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

/* ============================================================
 * dashicons → 線画SVG 上書き（フロントUI用）
 *
 * 方式: フォントグリフを font-size:0 で消し、span自体に
 *       currentColor の mask で線画SVGを描く（マークアップ無変更）。
 * 対象: フロントで実使用されている15アイコンのみ。
 * 除外: #wpadminbar（管理バーは標準の dashicons を維持）。
 * ============================================================ */

.dashicons-edit, .dashicons-trash, .dashicons-plus, .dashicons-download,
.dashicons-groups, .dashicons-yes-alt, .dashicons-saved, .dashicons-no-alt,
.dashicons-lock, .dashicons-book-alt, .dashicons-update, .dashicons-info-outline,
.dashicons-email, .dashicons-calendar, .dashicons-arrow-right {
    font-size: 0 !important;            /* 元のフォントグリフを不可視化 */
    background-color: currentColor;     /* 色はテキスト色に追従 */
    -webkit-mask: var(--cn-icon) center / 72% no-repeat;
    mask: var(--cn-icon) center / 72% no-repeat;
}

.dashicons-edit         { --cn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E"); }
.dashicons-trash        { --cn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/%3E%3Cpath d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cline x1='10' y1='11' x2='10' y2='17'/%3E%3Cline x1='14' y1='11' x2='14' y2='17'/%3E%3C/svg%3E"); }
.dashicons-plus         { --cn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E"); }
.dashicons-download     { --cn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E"); }
.dashicons-groups       { --cn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
.dashicons-yes-alt      { --cn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
.dashicons-saved        { --cn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.dashicons-no-alt       { --cn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E"); }
.dashicons-lock         { --cn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); }
.dashicons-book-alt     { --cn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/%3E%3C/svg%3E"); }
.dashicons-update       { --cn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3Cpath d='M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16'/%3E%3Cpath d='M8 16H3v5'/%3E%3C/svg%3E"); }
.dashicons-info-outline { --cn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E"); }
.dashicons-email        { --cn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E"); }
.dashicons-calendar     { --cn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M16 2v4'/%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E"); }
.dashicons-arrow-right  { --cn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E"); }

/* 管理バーは標準 dashicons を維持（グリフ復元） */
#wpadminbar .dashicons,
#wpadminbar .ab-icon {
    font-size: 20px !important;
    background-color: transparent !important;
    -webkit-mask: none !important;
    mask: none !important;
}