/* ============================================================
   🎨 品牌主體黃色統一定義
   標準黃色：#ff9900  =  rgb(255, 153, 0)
   所有黃色皆以此為基礎衍生，確保白天/黑夜版面一致
   ============================================================ */
:root {
	/* 主體品牌黃（標準色）*/
	--brand-yellow:         #ff9900;   /* rgb(255,153,0)    主色 */
	--brand-yellow-dark:    #cc7a00;   /* rgb(204,122,0)    深金黃，白天圖示筆觸用 */
	--brand-yellow-deeper:  #995c00;   /* rgb(153, 92,0)    深咖啡黃，白天文字用 */
	--brand-yellow-light:   #ffad33;   /* rgb(255,173,51)   亮黃，hover 效果用 */
	--brand-yellow-dim:     #ffaa00;   /* rgb(255,170,0)    愛心/收藏填色（較飽和） */

	/* 透明度衍生版（供 rgba 疊加使用） */
	--brand-yellow-10:  rgba(255, 153, 0, 0.10);
	--brand-yellow-20:  rgba(255, 153, 0, 0.20);
	--brand-yellow-35:  rgba(255, 153, 0, 0.35);
	--brand-yellow-50:  rgba(255, 153, 0, 0.50);

	/* 品牌黃的 HSL 分量寫法（供 hsl(var(--primary)/透明度) 的 Tailwind 語法使用） */
	--brand-yellow-hsl: 36 100% 50%;
}

/* ============================================================
   黑夜模式（預設 / html.dark）：覆蓋 app.css 的 --primary
   讓黑夜模式的主色也使用品牌黃 #ff9900
   ============================================================ */
:root,
html.dark {
	--primary:            var(--brand-yellow-hsl);  /* 主色 = 品牌黃 */
	--accent:             var(--brand-yellow-hsl);  /* 強調色 = 品牌黃 */
	--ring:               var(--brand-yellow-hsl);  /* focus ring = 品牌黃 */
	--primary-foreground: 0 0% 0%;                  /* 黃底上用黑字 */
}

/* ============================================================
   白天模式變數定義
   ============================================================ */
html.light {
	--background:             210 20% 98%; /* #f7f8fa 背景 */
	--foreground:             215 14% 34%; /* 深灰字 #4b5563 */
	--card:                   0 0% 100%;
	--card-foreground:        215 14% 34%;
	--popover:                0 0% 100%;
	--popover-foreground:     215 14% 34%;
	--primary:                var(--brand-yellow-hsl);  /* 白天主色 = 品牌黃 */
	--primary-foreground:     0 0% 100%;                /* 白天黃底上用白字 */
	--secondary:              210 40% 96.1%;
	--secondary-foreground:   222.2 47.4% 11.2%;
	--muted:                  210 40% 96.1%;
	--muted-foreground:       215.4 16.3% 46.9%;
	--accent:                 var(--brand-yellow-hsl);  /* 強調色 = 品牌黃 */
	--accent-foreground:      222.2 47.4% 11.2%;
	--destructive:            0 84.2% 60.2%;
	--destructive-foreground: 210 40% 98%;
	--border:                 214.3 31.8% 91.4%;
	--input:                  214.3 31.8% 91.4%;
	--ring:                   var(--brand-yellow-hsl);  /* focus ring = 品牌黃 */
}

/* ============================================================
   白天模式：選中的側邊選單項目
   深灰底 + 品牌黃字 + 品牌黃圖示
   ============================================================ */
html.light a.text-primary.bg-muted,
html.light a.bg-muted.text-primary {
	background: #374151 !important;        /* 深灰底 */
	color: var(--brand-yellow) !important;
	border-color: transparent !important;
	border-radius: 0.5rem;
}

html.light a.text-primary.bg-muted svg,
html.light a.bg-muted.text-primary svg {
	stroke: var(--brand-yellow) !important; /* 品牌黃圖示 */
}

html.light a.text-primary.bg-muted span,
html.light a.bg-muted.text-primary span {
	color: var(--brand-yellow) !important; /* 品牌黃文字 */
	font-weight: 700;
}

/* ============================================================
   白天模式：未選中項目的深灰字與圖示
   ============================================================ */
html.light nav a:not(.text-primary) span {
	color: #4b5563 !important; /* 深灰 */
}

html.light nav a:not(.text-primary) svg:not(.brand-yellow-stroke) {
	stroke: #4b5563 !important; /* 深灰 */
}



/* ============================================================
   白天模式邊框加粗
   ============================================================ */
html.light .border-r {
	border-right-width: 1px !important;
}

html.light .border-t {
	border-top-width: 2px !important;
}


/* ============================================================
   Logo 深淺色切換
   ============================================================ */
html.dark .logo-light { display: none; }
html.light .logo-dark { display: none; }
html:not(.dark):not(.light) .logo-light { display: none; } /* 預設深色 */