/* 語意層 · 把原始色階對應到「用途」。
   ★ 換色系時不動這個檔。元件只能引用這裡的 --color-* 名稱。 */
:root{
  /* 品牌 —— 隨主題改變 */
  --color-primary:        var(--c-brand-600);
  --color-primary-hover:  var(--c-brand-700);
  --color-primary-subtle: var(--c-brand-050);
  --color-text-on-primary:var(--c-on-brand);

  /* 語意 —— 恆定，不隨品牌色改變（鐵則三）
     測驗的「答對／答錯」是語意，不是品牌。換成藍色主題後答對仍須是綠色。 */
  --color-success:        var(--c-success-600);
  --color-success-subtle: var(--c-success-050);
  --color-warning:        var(--c-warning-600);
  --color-warning-subtle: var(--c-warning-050);
  --color-danger:         var(--c-danger-600);
  --color-danger-subtle:  var(--c-danger-050);
  --color-info:           var(--c-info-600);
  --color-info-subtle:    var(--c-info-050);

  /* 介面 */
  --color-bg:             var(--c-neutral-050);
  --color-surface:        var(--c-neutral-000);
  --color-surface-sunken: var(--c-neutral-100);
  --color-border:         var(--c-neutral-300);
  --color-border-subtle:  var(--c-hairline);
  --color-text:           var(--c-neutral-900);
  --color-text-muted:     var(--c-neutral-500);

  --color-backdrop:var(--c-backdrop);

  --shadow-sm:0 1px 2px var(--c-shadow);
  --shadow-md:0 4px 12px var(--c-shadow);
}