/* ── MD3 토큰 ──────────────────────────────────────────────────────────────
   기준색은 엑셀 내보내기의 표 머리 빨강(#C82820). 출석/결석 색도 엑셀 칸 색을 그대로 쓴다.

   테마: <html data-theme="light|dark"> 가 있으면 그것을, 없으면 시스템 설정을 따른다(js/theme.js).
   ⚠️ 다크 값은 아래 두 곳에 **똑같이** 있다(시스템 다크 · 직접 고른 다크). 한쪽만 고치지 말 것.
   ⚠️ app.css 에는 prefers-color-scheme 을 쓰지 않는다 — 색은 전부 여기 토큰으로만 바꾼다. */
:root {
  color-scheme: light;
  --primary: #B3261E;
  --on-primary: #FFFFFF;
  --primary-container: #FFDAD5;
  --on-primary-container: #410001;
  --secondary-container: #F7DDD9;
  --on-secondary-container: #2C1512;
  --title: #8F1D17;

  --surface: #FFF8F6;
  --surface-lowest: #FFFFFF;
  --surface-low: #FFF0EE;
  --surface-container: #FCEAE7;
  --surface-high: #F6E4E1;
  --surface-highest: #F1DEDB;
  --on-surface: #231918;
  --on-surface-variant: #534341;
  --outline: #857371;
  --outline-variant: #D8C2BE;
  --inverse-surface: #392E2C;
  --inverse-on-surface: #FFEDEA;
  --scrim: rgba(0, 0, 0, .32);

  /* 엑셀 표 */
  --sheet-head: #C82820;
  --on-sheet-head: #FFFFFF;
  --sheet-line: #E3D3D0;
  --stat-bg: #FBEEED;
  --stat-fg: #C82820;
  --present-bg: #E6F4EA;
  --present-fg: #1E7B34;
  --present-solid: #1E7B34;
  --absent-bg: #FCE8E6;
  --absent-fg: #B3261E;
  --absent-solid: #B3261E;
  --on-solid: #FFFFFF;          /* 출석/결석 꽉 찬 버튼의 글자 */
  --progress: var(--primary);

  /* ClassSpace. 워드마크(원본 검정) — 다크에서는 밝은 바탕 위에 올린다 */
  --wordmark-bg: transparent;
  --wordmark-pad: 0px;
  --logo-pad: 0px;               /* 로그인 화면의 큰 로고용 */
  --brand-sub: #786C7D;          /* 로고 옆 글자 — ClassSpace 총괄 관리자 사이트와 같은 색 */

  --shadow-1: 0 1px 2px rgba(35, 25, 24, .12), 0 1px 3px 1px rgba(35, 25, 24, .06);
  --shadow-2: 0 2px 6px 2px rgba(35, 25, 24, .10), 0 1px 2px rgba(35, 25, 24, .14);
  --shadow-3: 0 6px 16px 4px rgba(35, 25, 24, .14), 0 2px 4px rgba(35, 25, 24, .12);

  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 28px;
  --r-full: 999px;

  --topbar-h: 60px;
  --font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  --ease: cubic-bezier(.2, 0, 0, 1);
}

/* 직접 고른 다크 */
:root[data-theme="dark"] {
  color-scheme: dark;
  --primary: #FFB4A9;
  --on-primary: #690002;
  --primary-container: #8C1D16;
  --on-primary-container: #FFDAD5;
  --secondary-container: #5D3F3B;
  --on-secondary-container: #FFDAD5;
  --title: #FFDAD5;
  --surface: #1A1110;
  --surface-lowest: #140C0B;
  --surface-low: #231918;
  --surface-container: #271D1C;
  --surface-high: #322827;
  --surface-highest: #3D3231;
  --on-surface: #F1DEDB;
  --on-surface-variant: #D8C2BE;
  --outline: #A08C89;
  --outline-variant: #534341;
  --inverse-surface: #F1DEDB;
  --inverse-on-surface: #392E2C;
  --scrim: rgba(0, 0, 0, .55);
  --sheet-head: #8C1D16;
  --on-sheet-head: #FFDAD5;
  --sheet-line: #43302E;
  --stat-bg: #3B1E1A;
  --stat-fg: #FFB4A9;
  --present-bg: #12391D;
  --present-fg: #A8DAB5;
  --present-solid: #6FCF8A;
  --absent-bg: #4E1813;
  --absent-fg: #FFB4AB;
  --absent-solid: #FF8A7E;
  --on-solid: #1A1110;
  --progress: #FFDAD5;
  --wordmark-bg: #F7F2F1;
  --wordmark-pad: 5px 9px;
  --logo-pad: 12px 16px;
  --brand-sub: #BDB2C1;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4), 0 1px 3px 1px rgba(0, 0, 0, .2);
  --shadow-2: 0 2px 6px 2px rgba(0, 0, 0, .3), 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-3: 0 6px 16px 4px rgba(0, 0, 0, .35), 0 2px 4px rgba(0, 0, 0, .4);
}

/* 시스템 다크(직접 '라이트'를 고르지 않았을 때) — 위 블록과 같은 값 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --primary: #FFB4A9;
    --on-primary: #690002;
    --primary-container: #8C1D16;
    --on-primary-container: #FFDAD5;
    --secondary-container: #5D3F3B;
    --on-secondary-container: #FFDAD5;
    --title: #FFDAD5;
    --surface: #1A1110;
    --surface-lowest: #140C0B;
    --surface-low: #231918;
    --surface-container: #271D1C;
    --surface-high: #322827;
    --surface-highest: #3D3231;
    --on-surface: #F1DEDB;
    --on-surface-variant: #D8C2BE;
    --outline: #A08C89;
    --outline-variant: #534341;
    --inverse-surface: #F1DEDB;
    --inverse-on-surface: #392E2C;
    --scrim: rgba(0, 0, 0, .55);
    --sheet-head: #8C1D16;
    --on-sheet-head: #FFDAD5;
    --sheet-line: #43302E;
    --stat-bg: #3B1E1A;
    --stat-fg: #FFB4A9;
    --present-bg: #12391D;
    --present-fg: #A8DAB5;
    --present-solid: #6FCF8A;
    --absent-bg: #4E1813;
    --absent-fg: #FFB4AB;
    --absent-solid: #FF8A7E;
    --on-solid: #1A1110;
    --progress: #FFDAD5;
    --wordmark-bg: #F7F2F1;
    --wordmark-pad: 5px 9px;
    --logo-pad: 12px 16px;
    --brand-sub: #BDB2C1;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4), 0 1px 3px 1px rgba(0, 0, 0, .2);
    --shadow-2: 0 2px 6px 2px rgba(0, 0, 0, .3), 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-3: 0 6px 16px 4px rgba(0, 0, 0, .35), 0 2px 4px rgba(0, 0, 0, .4);
  }
}