/* ============================================================
 * Lyrical Parchment —— 平台的設計 token，全站唯一一份。
 *
 * **這個檔案只放 CSS 自訂屬性，不放任何元件樣式。**
 * 元件長什麼樣是各畫面自己的事（開始頁、玩家資料頁、各遊戲），
 * 但「羊皮紙是哪個米白、主色是哪個橄欖綠」只能有一個答案——
 * 兩份色票並存的下場就是這次要收拾的東西：遊戲畫面是羊皮紙＋海軍藍、
 * 進版頁是米白＋橄欖綠，同一個產品看起來像兩個。
 *
 * 掛在 :root 而不是某個容器 class：短代碼可能出現在頁面的任何位置，
 * 而且各遊戲的根容器 class 名字各不相同（.srg-root / .mh-root / …）。
 *
 * 來源是 Musica Chronicles 的設計稿 DESIGN.md（Material 風格的角色命名，
 * 這裡只取實際用得到的那些，不整包搬——沒有人用的 token 只會變成雜訊）。
 * ============================================================ */

:root {
	/* ---- 表面 ---- */
	--mh-paper: #fcf9f0;          /* 底：暖羊皮紙 */
	--mh-surface: #f1eee5;        /* 卡片、面板 */
	--mh-surface-hi: #ffffff;     /* 最上層（輸入框、亮面卡） */
	--mh-surface-dim: #dddad1;    /* 分隔、停用態 */
	--mh-parchment-warm: #f6eccc; /* 暖羊皮紙：比 --mh-paper 更黃更濃，「你」那一列的底 */

	/* ---- 文字 ---- */
	--mh-ink: #1c1c17;            /* 內文 */
	--mh-muted: #45483d;          /* 次要說明文字 */
	--mh-outline: #76786c;        /* 邊框線 */

	/* ---- 主色（深橄欖綠） ---- */
	--mh-primary: #455529;
	--mh-primary-dim: #5d6d3f;
	--mh-on-primary: #ffffff;
	--mh-primary-soft: #dbeeb5;   /* 主色的淺底 */

	/* ---- 強調（蜂蜜黃／古銅） ---- */
	--mh-honey: #fed65b;          /* 填色用：選中的圓點、active pill */
	--mh-gold-ink: #735c00;       /* 同色系但讀得到的字色，別拿 honey 當文字 */

	/* ---- 其他語意色 ---- */
	--mh-plum: #684362;           /* 第三色，用於稱號／裝飾 */
	--mh-success: #4fa46a;
	--mh-danger: #ba1a1a;

	/* ---- 蠟封印章（主要行動鈕） ---- */
	--mh-seal-a: #c62828;
	--mh-seal-b: #93000a;
	--mh-seal-edge: #7a0006;

	/* ---- 台座的二三名（銀／古銅） ----
	   這兩個顏色在設計系統裡本來沒有，是傳奇榜台座才需要的。放這裡而不是
	   散在元件 CSS 裡：這個檔案是全站唯一一份色票，兩份並存正是它要防的事。 */
	--mh-silver: #d6d8cd;
	--mh-silver-edge: #8e9184;
	--mh-bronze: #e3cda6;
	--mh-bronze-edge: #8a6f3a;

	/* ---- 通道值：給需要自訂 alpha 的地方 ----
	   `rgba(var(--mh-ink-rgb), .35)` 這種寫法，才不會為了「同一個顏色的半透明版」
	   在各處散落幾十個字面值——那正是這次收拾遊戲配色時發現的東西（57 處）。
	   色相要改時只改這裡一行。 */
	--mh-ink-rgb: 28, 28, 23;
	--mh-surface-rgb: 241, 238, 229;
	--mh-surface-hi-rgb: 255, 255, 255;
	--mh-gold-rgb: 201, 168, 106;   /* 裝飾用的古銅（線、微光），不是文字色 */

	/* ---- 線與陰影 ---- */
	--mh-border: rgba(118, 120, 108, .32);
	--mh-shadow-card: 0 8px 24px -12px rgba(28, 28, 23, .35), 0 2px 4px -2px rgba(28, 28, 23, .15);
	--mh-shadow-lift: 0 10px 26px -8px rgba(28, 28, 23, .5);

	/* ---- 字體 ----
	   標題用襯線（設計稿是 EB Garamond，但那要外連 Google Fonts；
	   Fraunces/Noto Serif TC 是系統或主題多半已有的近似字，
	   不為了字體多一個外部相依與 CSP 問題）。 */
	--mh-serif: "Fraunces", "Noto Serif TC", Georgia, serif;
	--mh-sans: "Nunito", "PingFang TC", "Noto Sans TC", -apple-system, sans-serif;

	/* ---- 圓角 ---- */
	--mh-radius-sm: 10px;
	--mh-radius: 16px;
	--mh-radius-lg: 20px;
	--mh-radius-pill: 999px;
}