/*
 * CYEN デザイントークン
 *
 * サイト全体で使う色・形・書体をここに集約する。
 * テンプレートはこの値を上書きするだけで、各コンポーネントのCSSは触らない。
 *
 * 命名は用途ベース。「どこで使うか」ではなく「何を表すか」で付けている。
 * 例: --cyen-danger は「赤」ではなく「取り消し・エラーを表す色」。
 */

:root {
    /* ---- 面 ---- */
    --cyen-bg: #f7f8fb;
    --cyen-surface: #ffffff;
    --cyen-surface-sunk: #f5f5f5;
    --cyen-surface-mute: #eeeeee;

    /* ---- 文字 ---- */
    --cyen-text-strong: #111827;
    --cyen-text: #333333;
    --cyen-text-muted: #666666;
    --cyen-text-faint: #999999;
    --cyen-text-inverse: #ffffff;

    /* ---- 線 ---- */
    --cyen-border: #e5e7eb;
    --cyen-border-strong: #d1d5db;
    --cyen-border-width: 1px;

    /* ---- アクセント ---- */
    --cyen-accent: #2563eb;
    --cyen-accent-text: #ffffff;
    --cyen-accent-soft: #eff4ff;

    /* ---- 状態 ---- */
    --cyen-success: #2e6a4e;
    --cyen-success-soft: #edf7f0;
    --cyen-success-border: #a8d5b8;
    --cyen-warning: #92400e;
    --cyen-warning-soft: #fffbeb;
    --cyen-warning-border: #e0c98a;
    --cyen-danger: #dc2626;
    --cyen-danger-strong: #991b1b;
    --cyen-danger-soft: #fdf0f0;
    --cyen-danger-border: #e2b0b0;
    --cyen-star: #e0a300;

    /* ---- 曜日・バッジ ---- */
    --cyen-day-sat: #2f6fd0;
    --cyen-day-sun: #d03a3a;
    --cyen-day-holiday: #d03a3a;
    --cyen-badge-new: #c0304f;

    /* ---- 塗りつぶしの強調（主ボタン・選択中のタブ・見出し帯） ----
       文字色トークンを背景に流用しないこと。暗色テンプレで明暗が反転する。 */
    --cyen-fill-bg: #111827;
    --cyen-fill-text: #ffffff;

    /* ---- 強調チップ（タグ絞り込みの選択中など） ---- */
    --cyen-chip-bg: #f1f2f4;
    --cyen-chip-text: #4a4a4a;
    --cyen-chip-active-bg: #2f3542;
    --cyen-chip-active-text: #ffffff;

    /* ---- 画像の上に重ねる色 ---- */
    --cyen-overlay: rgba(0, 0, 0, .38);
    --cyen-overlay-strong: rgba(0, 0, 0, .6);
    --cyen-overlay-weak: rgba(0, 0, 0, .4);
    --cyen-overlay-dot: rgba(255, 255, 255, .55);

    /* ---- 形 ---- */
    --cyen-radius-lg: 16px;
    --cyen-radius-md: 10px;
    --cyen-radius-sm: 8px;
    --cyen-radius-xs: 6px;
    --cyen-radius-pill: 999px;

    /* ---- 影 ---- */
    --cyen-shadow-sm: 0 2px 8px rgba(0, 0, 0, .04);
    --cyen-shadow-md: 0 10px 28px rgba(15, 23, 42, .08);

    /* ---- 書体 ---- */
    --cyen-font-body: inherit;
    --cyen-font-display: inherit;
    --cyen-font-en: inherit;
    --cyen-heading-weight: 700;
    --cyen-heading-tracking: 0;

    /* ---- 見出しの装飾 ---- */
    --cyen-section-rule: var(--cyen-border);
    --cyen-section-accent: var(--cyen-accent);
}

/*
 * 旧トークン名との橋渡し。
 * theme.css と front-theme-base.css が参照しているため、移行が終わるまで残す。
 *
 * 【重要】この宣言は必ず body に置くこと。
 * var() は「宣言がある要素」の上で解決されるため、:root に置くと
 * html 時点の既定値で確定してしまい、body に付けたテンプレートの値が反映されない。
 * テンプレート名は body クラスで判定しているので、橋渡しも body で行う必要がある。
 */
body {
    --cyen-site-bg: var(--cyen-bg);
    --cyen-site-surface: var(--cyen-surface);
    --cyen-site-surface-soft: var(--cyen-surface-sunk);
    --cyen-site-text: var(--cyen-text);
    --cyen-site-muted: var(--cyen-text-muted);
    --cyen-site-primary: var(--cyen-accent);
    --cyen-site-primary-text: var(--cyen-accent-text);
    --cyen-site-accent: var(--cyen-accent);
    --cyen-site-border: var(--cyen-border);
    --cyen-site-success: var(--cyen-success);
    --cyen-site-danger: var(--cyen-danger);
    --cyen-site-radius: var(--cyen-radius-md);
    --cyen-site-radius-sm: var(--cyen-radius-xs);
    --cyen-site-shadow: var(--cyen-shadow-md);
    --cyen-site-cta-primary-bg: var(--cyen-accent);
    --cyen-site-cta-primary-text: var(--cyen-accent-text);
    --cyen-site-cta-primary-border: var(--cyen-accent);
    --cyen-site-cta-secondary-bg: var(--cyen-surface);
    --cyen-site-cta-secondary-text: var(--cyen-text-strong);
    --cyen-site-cta-secondary-border: var(--cyen-border-strong);
    --cyen-site-cta-tel-bg: var(--cyen-warning);
    --cyen-site-cta-tel-text: var(--cyen-text-inverse);
    --cyen-site-cta-tel-border: var(--cyen-warning);

    --cyen-front-bg: var(--cyen-bg);
    --cyen-front-surface: var(--cyen-surface);
    --cyen-front-surface-soft: var(--cyen-surface-sunk);
    --cyen-front-text: var(--cyen-text);
    --cyen-front-muted: var(--cyen-text-muted);
    --cyen-front-primary: var(--cyen-accent);
    --cyen-front-primary-text: var(--cyen-accent-text);
    --cyen-front-border: var(--cyen-border);
    --cyen-front-success: var(--cyen-success);
    --cyen-front-danger: var(--cyen-danger);
    --cyen-front-radius: var(--cyen-radius-md);
    --cyen-front-radius-sm: var(--cyen-radius-sm);
    --cyen-front-shadow: var(--cyen-shadow-md);
}