@charset "UTF-8";
/* 樂笛共用顏色積木：全站色值唯一來源。調色請先修改這裡，版面只引用語意變數。 */
:root {

  /* 主色與互動：全站主要按鈕、選取與鍵盤焦點 */
  --color-primary: #4968ef;
  --color-primary-hover: #304fcf;
  --color-primary-soft: #edf1ff;
  --color-primary-border: #c4cfff;
  --color-primary-focus: #8599ff;
  --color-primary-ink: #4c61ac;
  --color-coral: #ff8b78;
  --color-coral-hover: #ff7963;
  --color-coral-ink: #773e2d;
  --color-coral-soft: #fff0eb;
  --color-lime: #d9ef83;
  --color-lime-soft: #f3f9dd;
  --color-lavender: #bcaaf4;
  --color-lavender-soft: #f1edff;

  /* 報到／簽退卡片沿用入口學生珊瑚與老師薰衣草積木。 */
  --color-attendance-in: var(--color-coral);
  --color-attendance-in-soft: var(--color-student-soft);
  --color-attendance-in-icon: var(--color-student-icon);
  --color-attendance-in-ink: var(--color-student-ink);
  --color-attendance-out: var(--color-lavender);
  --color-attendance-out-soft: var(--color-teacher-soft);
  --color-attendance-out-icon: var(--color-teacher-icon);
  --color-attendance-out-ink: var(--color-teacher-ink);

  /* 中性：文字、表面、分隔線；相近灰階共用同一積木 */
  --color-text: #202337;
  --color-text-secondary: #41475b;
  --color-text-muted: #717588;
  --color-text-soft: #8a91a4;
  --color-text-faint: #a2a9ba;
  --color-surface: #fff;
  --color-canvas: #f6f7fb;
  --color-surface-soft: #fafbff;
  --color-surface-muted: #f4f6fb;
  --color-surface-inset: #eef1f7;
  --color-surface-glass: #ffffffed;
  --color-border: #e7e9f1;
  --color-border-soft: #eff0f6;
  --color-border-strong: #d7dce9;
  --color-clear: transparent;

  /* 身分：學生珊瑚、老師薰衣草、行政青檸 */
  --color-student-soft: #fff4ef;
  --color-student-icon: #ffd8cb;
  --color-student-ink: #a85135;
  --color-teacher-soft: #f1edff;
  --color-teacher-icon: #e1d5ff;
  --color-teacher-ink: #7250b1;
  --color-staff-soft: #f1f8db;
  --color-staff-icon: #dff09a;
  --color-staff-ink: #607b17;

  /* 課種：音樂紫、作文藍、圍棋綠；卡片、圖例與頭像共用 */
  --color-music: #9562cd;
  --color-music-soft: #f3edfc;
  --color-music-ink: #71409f;
  --color-writing: #5e87ed;
  --color-writing-soft: #eaf0ff;
  --color-writing-ink: #3a61bc;
  --color-go: #a5c34c;
  --color-go-soft: #f2f7e3;
  --color-go-ink: #627b1a;

  /* 狀態：成功、注意、錯誤與收款 */
  --color-success-soft: #eaf5f0;
  --color-success-border: #d5ebdf;
  --color-success-ink: #28664c;
  --color-checkin-soft: #eef7e2;
  --color-checkin-border: #daeac7;
  --color-checkin-icon: #d7edb7;
  --color-checkin-ink: #52772f;
  --color-checkin-caption: #77935e;
  --color-warning-soft: #fff7e8;
  --color-warning-border: #f3e4c7;
  --color-warning-ink: #856026;
  --color-warning-accent: #e4ab43;
  --color-danger: #bd3654;
  --color-danger-soft: #fff0f3;
  --color-danger-border: #f4d6df;
  --color-danger-ink: #ab3150;
  --color-billing-ink: #ae563a;

  /* 時鐘、待機與提醒：以同一組多巴胺色系延伸 */
  --color-clock-ink: #5a497f;
  --color-privacy-violet: #f0edff;
  --color-privacy-blue: #edf4ff;
  --color-privacy-lime: #f6f8ec;
  --color-alarm: #473aacee;
  --color-alarm-flash: #6554c9ee;
  --color-alarm-confirm: #e0f69c;
  --color-alarm-confirm-ink: #3c4b22;

  /* 遮罩與陰影：透明度也集中在此處 */
  --color-dialog-border: #ffffffcc;
  --color-backdrop: #242b4755;
  --color-shadow-soft: #26324b08;
  --color-shadow-card: #26324b03;
  --color-shadow-notice: #26324b0d;
  --color-shadow-dialog: #18203925;
  --color-shadow-alarm: #1d154a33;
  --color-shadow-primary-soft: #4968ef0d;
  --color-shadow-primary-hover: #4968ef1a;
  --color-shadow-primary: #4968ef24;

  /* 既有名稱相容別名：舊模組仍指向同一套顏色積木。 */
  --ink: var(--color-text);
  --muted: var(--color-text-muted);
  --paper: var(--color-canvas);
  --white: var(--color-surface);
  --line: var(--color-border);
  --blue: var(--color-primary);
  --blue-dark: var(--color-primary-hover);
  --blue-light: var(--color-primary-soft);
  --green: var(--color-primary);
  --green-light: var(--color-primary-soft);
  --orange: var(--color-billing-ink);
  --coral: var(--color-coral);
  --coral-light: var(--color-coral-soft);
  --lime: var(--color-lime);
  --lime-light: var(--color-lime-soft);
  --lavender: var(--color-lavender);
  --lavender-light: var(--color-lavender-soft);
  --red: var(--color-danger);
  --shadow: 0 8px 30px var(--color-shadow-soft);
}
