/* 老師端(登入後的頁面與登入頁)的品牌色與字型,接在 style.css 之後只覆寫 token 與少數元件;
   學生端(/s/*,body.studio)不載入這個檔(見 views/layout.ejs)。
   色相沿用 Phono logo:藍(主要動作、連結)、青綠(開放中、已回饋、成功)、琥珀(待批改、草稿、
   提醒)、珊瑚(遲交、錯誤、危險動作)。中文維持系統字,拉丁字母與數字沿用學生端已載入的
   Nunito 子集(同一個檔案,瀏覽器只載一次)。 */
@font-face {
  font-family: 'Studio Rounded';
  src: url('/fonts/nunito-latin.woff2') format('woff2');
  font-weight: 200 1000;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}

:root {
  --color-primary: #2563c9;
  --color-primary-active: #1d4fa3;
  --color-primary-disabled: #a9c3ee;
  --color-primary-soft: #dce7fb;
  --color-on-primary: #ffffff;
  --color-canvas: #ffffff;
  --color-surface-soft: #f4f7fc;
  --color-surface-strong: #e8eef8;
  --color-ink: #14213d;
  --color-body: #2c3a57;
  --color-muted: #5b6885;
  --color-muted-soft: #8a96b0;
  --color-hairline: #d4dcec;
  --color-hairline-soft: #e3e9f4;
  --color-border-strong: #9fb0cf;
  --color-error: #c9463a;
  --color-error-hover: #b03a2f;
  --color-error-bg: #fde8e5;
  --color-error-text: #a63a2c;
  --color-error-disabled: #f1b9b1;

  --color-status-active-bg: #dff5f2;
  --color-status-active-fg: #0a6f68;
  --color-status-closed-bg: #e8eef8;
  --color-status-closed-fg: #5b6885;
  --color-status-draft-bg: #fff1d6;
  --color-status-draft-fg: #7a4b00;

  --font-family: 'Studio Rounded', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang TC', 'Microsoft JhengHei', 'Noto Sans TC', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --shadow-card: rgba(20, 33, 61, 0.08) 0 4px 12px;
  --shadow-card-hover: rgba(20, 33, 61, 0.14) 0 8px 20px;
}

:root[data-theme="dark"] {
  --color-primary: #2563eb;
  --color-primary-active: #1d4ed8;
  --color-primary-disabled: #1f3261;
  --color-primary-soft: #1f3261;
  --color-on-primary: #ffffff;
  --color-canvas: #0f1627;
  --color-surface-soft: #16203a;
  --color-surface-strong: #1d2946;
  --color-ink: #eef2fb;
  --color-body: #cbd5ea;
  --color-muted: #94a3c4;
  --color-muted-soft: #6b7a9c;
  --color-hairline: #2c3a5c;
  --color-hairline-soft: #243150;
  --color-border-strong: #4b5f8c;
  --color-error: #ff8a80;
  --color-error-hover: #ff6f63;
  --color-error-bg: #4a1f1c;
  --color-error-text: #ffb3ad;
  --color-error-disabled: #5c2b27;

  --color-status-active-bg: #0f3a37;
  --color-status-active-fg: #3fd1c4;
  --color-status-closed-bg: #1d2946;
  --color-status-closed-fg: #94a3c4;
  --color-status-draft-bg: #4a3410;
  --color-status-draft-fg: #ffbe4d;

  --shadow-card: rgba(0, 0, 0, 0.35) 0 8px 8px;
  --shadow-card-hover: rgba(0, 0, 0, 0.5) 0 8px 24px;
}
/* 深色底上連結 hover 用亮一階的藍,主色的深色版是給按鈕底用的,當文字對比不夠。 */
:root[data-theme="dark"] a:hover { color: #7aa6f2; }

/* 深色模式的珊瑚色(--color-error)調亮是給文字與徽章用的,當按鈕底色配白字會太淡,
   危險按鈕另外用深一階的珊瑚。 */
:root[data-theme="dark"] .btn--danger { background: #c9463a; color: #ffffff; }
:root[data-theme="dark"] .btn--danger:hover { background: #b03a2f; }

/* 綠色主題的按鈕是黑字大寫加字距;藍色底配白字後字距可以收斂,也不必全大寫。 */
.btn,
.collection-create,
.collection-manage { text-transform: none; letter-spacing: 0.2px; }
.btn--secondary { border-color: var(--color-hairline); }
.btn--secondary:hover { border-color: var(--color-border-strong); }
a:hover { color: var(--color-primary-active); }
.preview-play-btn__spinner { border-color: rgb(255 255 255 / 35%); border-top-color: #ffffff; }
.waveform-progress { background: rgba(37, 99, 201, 0.18); }

/* 標題與數字用圓體,中文字仍走系統字(unicode-range 只涵蓋拉丁字母)。 */
h1, h2, .dashboard-stat dd, .assessment__score dd, .overview-stats dd, .rec-timer { font-family: var(--font-family); }