/**
 * DANCE SOUL 設計變數（Design Tokens）
 *
 * 全站唯一的顏色／圓角／間距／字級來源。
 * 規則：
 *   1. 顏色一律從佈景主題的 theme.json 色票取值（--wp--preset--color--*），
 *      換主題時只需要改這個檔案的「對應表」，全站與兩個外掛會一起變。
 *   2. 後面的值是「備用值」：主題沒有該色票時使用，確保外掛單獨也能正常顯示。
 *   3. 頁面、外掛不得再寫死色碼，只能引用 --ds-* 變數。
 *
 * 換主題檢查清單見 docs/DESIGN-SYSTEM.md。
 */

:root {
	/* ---- 對應表：語意名稱 → 主題色票 ---------------------------------- */
	--ds-text:        var(--wp--preset--color--contrast,   #111111);
	--ds-text-muted:  var(--wp--preset--color--contrast-2, #636363);
	--ds-text-subtle: var(--wp--preset--color--contrast-3, #a4a4a4);
	--ds-surface:     var(--wp--preset--color--base-2,     #ffffff);
	--ds-surface-alt: var(--wp--preset--color--base,       #f9f9f9);
	--ds-accent:      var(--wp--preset--color--contrast,   #111111);
	--ds-on-accent:   var(--wp--preset--color--base-2,     #ffffff);
	--ds-brand:       var(--wp--preset--color--accent-3,   #d8613c);
	--ds-on-brand:    var(--wp--preset--color--base-2,     #ffffff);

	/* ---- 由文字色推算的中性色（換成深色主題也會自動反白）------------------ */
	--ds-line:         color-mix(in srgb, var(--ds-text)  8%, transparent);
	--ds-line-strong:  color-mix(in srgb, var(--ds-text) 15%, transparent);
	--ds-fill:         color-mix(in srgb, var(--ds-text)  4%, transparent);
	--ds-fill-strong:  color-mix(in srgb, var(--ds-text)  8%, transparent);
	--ds-overlay:      color-mix(in srgb, var(--ds-text) 72%, transparent);
	--ds-accent-hover: color-mix(in srgb, var(--ds-accent) 88%, var(--ds-surface));
	--ds-shadow:       0 1px 3px color-mix(in srgb, var(--ds-text) 6%, transparent);
	--ds-shadow-lg:    0 10px 26px color-mix(in srgb, var(--ds-text) 14%, transparent);

	/* ---- 狀態色（主題通常沒有，因此這裡統一定義一次）-------------------- */
	--ds-danger:      #b32d2e;
	--ds-danger-bg:   #fde8e8;
	--ds-warn:        #b45309;
	--ds-warn-bg:     #fffbeb;
	--ds-warn-line:   #f0d58a;
	--ds-success:     #10b981;
	--ds-success-fg:  #065f46;
	--ds-success-bg:  #d1fae5;
	--ds-info:        #22406b;
	--ds-info-bg:     #f1f7ff;
	--ds-info-line:   #cfe0f7;
	--ds-promo:       #ff3b30;
	--ds-highlight:   #f5b301;
	--ds-highlight-2: #ffcf40;
	--ds-highlight-fg:#4a3200;

	/* ---- 形狀與間距 --------------------------------------------------- */
	--ds-radius:      14px;
	--ds-radius-sm:   8px;
	--ds-radius-pill: 999px;
	--ds-gap:         20px;
	--ds-gap-sm:      8px;
	--ds-transition:  0.2s ease;
	--ds-maxw-wide:   1280px;
	--ds-maxw-content:1000px;
	--ds-gutter:      var(--wp--style--root--padding-left, clamp(18px, 4vw, 40px));

	/* ---- 舊名稱別名（既有頁面內容仍在使用，之後逐頁換掉再移除）---------- */
	--ds-fg:        var(--ds-text);
	--ds-fg-muted:  var(--ds-text-muted);
	--ds-bg-card:   var(--ds-surface-alt);
	--ds-border:    var(--ds-line-strong);
	--ds-accent-fg: var(--ds-on-accent);
	--ds-warm-bg:   #f6efe4;
	--ds-warm-fg:   #5c4a2e;
	--ds-cool-bg:   #eef0f2;
	--ds-cool-fg:   #41474f;
	--ds-card-radius: var(--ds-radius-sm);
	--ds-card-gap:    var(--ds-gap-sm);
}