/**
 * TeachSYS Plus - 全域 Design Tokens
 * ---------------------------------------------------------------------------
 * 純 Vanilla CSS，不使用任何 utility framework。
 * 所有尺寸以「教室觸控大電視 / 平板 / 手機」為首要考量，觸控靶區最小 48px。
 */

:root {
  /* ── 色彩：品牌 ───────────────────────────────────────────── */
  --c-brand:         #2563eb;
  --c-brand-strong:  #1d4ed8;
  --c-brand-soft:    #dbeafe;

  /* ── 色彩：語意狀態 ───────────────────────────────────────── */
  --c-success:       #16a34a;
  --c-success-soft:  #dcfce7;
  --c-warn:          #d97706;
  --c-warn-soft:     #fef3c7;
  --c-danger:        #dc2626;
  --c-danger-soft:   #fee2e2;
  --c-info:          #0891b2;
  --c-info-soft:     #cffafe;

  /* ── 色彩：假別標籤 ───────────────────────────────────────── */
  /* 刻意避開未到（紅）、到校（綠）、遲到（琥珀）三種出勤狀態色，
     否則教師掃視座號矩陣時會把假別誤判成出勤狀態 */
  --c-sick:             #be123c;   /* 病假：玫瑰紅 */
  --c-sick-soft:        #ffe4e6;
  --c-personal:         #475569;   /* 事假：石板藍 */
  --c-personal-soft:    #e2e8f0;
  --c-official:         #0f766e;   /* 公假：青綠 */
  --c-official-soft:    #ccfbf1;
  --c-bereavement:      #6d28d9;   /* 喪假：紫 */
  --c-bereavement-soft: #ede9fe;

  /* ── 色彩：介面 ───────────────────────────────────────────── */
  --c-bg:            #f1f5f9;
  --c-surface:       #ffffff;
  --c-surface-2:     #f8fafc;
  --c-border:        #e2e8f0;
  --c-border-strong: #cbd5e1;
  --c-text:          #0f172a;
  --c-text-muted:    #64748b;
  --c-text-invert:   #ffffff;

  /* 毛玻璃擬態底色（Modal 遮罩與面板） */
  --c-scrim:         rgba(15, 23, 42, 0.45);
  --c-glass:         rgba(255, 255, 255, 0.82);
  --glass-blur:      18px;

  /* ── 圓角 ─────────────────────────────────────────────────── */
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-pill: 999px;

  /* ── 陰影：微立體柔和陰影 ─────────────────────────────────── */
  --sh-1: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.08);
  --sh-2: 0 4px 10px rgba(15, 23, 42, 0.07), 0 2px 4px rgba(15, 23, 42, 0.05);
  --sh-3: 0 12px 28px rgba(15, 23, 42, 0.12), 0 4px 10px rgba(15, 23, 42, 0.06);
  --sh-4: 0 28px 60px rgba(15, 23, 42, 0.22), 0 10px 20px rgba(15, 23, 42, 0.10);
  --sh-focus: 0 0 0 4px rgba(37, 99, 235, 0.28);

  /* ── 間距 ─────────────────────────────────────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* ── 觸控靶區（國小學童在大電視 / 平板上操作） ─────────────── */
  --tap-min:   48px;   /* 次要按鈕最小高度 */
  --tap-md:    56px;   /* 一般按鈕 */
  --tap-lg:    64px;   /* 主要動作按鈕 */
  --tap-gap:   var(--sp-3);  /* 相鄰互動元件最小間距，防誤觸 */

  /* ── 字級 ─────────────────────────────────────────────────── */
  --fs-xs:  13px;
  --fs-sm:  15px;
  --fs-md:  17px;
  --fs-lg:  21px;
  --fs-xl:  28px;
  --fs-2xl: 40px;
  --fs-hero: 64px;   /* 掃描結果的姓名大字報 */

  --ff-base: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, -apple-system, sans-serif;
  --ff-mono: ui-monospace, "Cascadia Mono", "Consolas", monospace;

  /* ── 動效 ─────────────────────────────────────────────────── */
  --dur-fast: 120ms;
  --dur-mid:  220ms;
  --dur-slow: 380ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── 層級 ─────────────────────────────────────────────────── */
  --z-nav:    100;
  --z-scrim:  900;
  --z-modal:  1000;
  --z-toast:  1100;
}

/* 教室大電視：整體放大，遠距可視 */
@media (min-width: 1600px) {
  :root {
    --fs-md:  19px;
    --fs-lg:  24px;
    --fs-xl:  32px;
    --fs-2xl: 48px;
    --tap-md: 64px;
    --tap-lg: 76px;
  }
}

/* 尊重使用者的減少動態偏好 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-mid:  0ms;
    --dur-slow: 0ms;
  }
}