/* ============================================================
   palette.css — 운동(UN:DONG) 화면 색상 프리셋
   html[data-palette="greige|slate|charcoal|classic|midnight|plum|ocean|blush"] 으로 전환

   · 각 HTML 파일이 자체 :root 에 색을 정의하고 있으므로,
     여기서는 반드시 :root[data-palette=...] (명시도 0,1,1) 로 정의해
     인라인 <style> 의 :root (0,1,0) 를 이긴다.
   · 따라서 palette.js 가 <html> 에 data-palette 를 항상 부여해야 한다.
   · 상태색(success/warning/danger/info)은 프리셋 공통 — 여기서 건드리지 않음.
   ============================================================ */

/* ── 웜 그레이지 (기본값) ─────────────────────────────────── */
:root[data-palette="greige"] {
  --primary:        #4A4642;
  --primary-light:  #5E5952;
  --primary-dark:   #33302C;
  --primary-darker: #2A2724;
  --primary-deep:   #211F1C;
  --primary-soft:   #EFECE7;
  --primary-soft-2: #E5E1DA;
  --primary-border: #CFC9BF;
  --accent:         #8B8378;
  --primary-rgb:    74, 70, 66;

  --bg:             #F7F6F4;
  --surface2:       #FBFAF8;
  --border:         #E3DFD8;
  --text:           #24221F;

  --shadow:    0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(74,70,66,.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,.12), 0 8px 32px rgba(74,70,66,.10);
}

/* ── 쿨 슬레이트 ─────────────────────────────────────────── */
:root[data-palette="slate"] {
  --primary:        #455160;
  --primary-light:  #5A6675;
  --primary-dark:   #2C3440;
  --primary-darker: #232A34;
  --primary-deep:   #1B2029;
  --primary-soft:   #EAEDF2;
  --primary-soft-2: #DDE3EB;
  --primary-border: #C3CBD6;
  --accent:         #8794A5;
  --primary-rgb:    69, 81, 96;

  --bg:             #F6F7F9;
  --surface2:       #FAFBFC;
  --border:         #DCE1E8;
  --text:           #1B2029;

  --shadow:    0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(69,81,96,.07);
  --shadow-md: 0 4px 12px rgba(0,0,0,.12), 0 8px 32px rgba(69,81,96,.11);
}

/* ── 차콜 + 브라스 ───────────────────────────────────────── */
:root[data-palette="charcoal"] {
  --primary:        #2A2A2D;
  --primary-light:  #3D3D41;
  --primary-dark:   #1B1B1D;
  --primary-darker: #141416;
  --primary-deep:   #0F0F10;
  --primary-soft:   #F1F0EE;
  --primary-soft-2: #E7E5E1;
  --primary-border: #D6D3CD;
  --accent:         #9A7B42;
  --primary-rgb:    42, 42, 45;

  --bg:             #FFFFFF;
  --surface2:       #FAFAF9;
  --border:         #E4E3E0;
  --text:           #161618;

  --shadow:    0 1px 3px rgba(0,0,0,.07), 0 4px 16px rgba(0,0,0,.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,.13), 0 8px 32px rgba(0,0,0,.09);
}

/* ── 클래식 (기존 보라 — 되돌리기용) ──────────────────────── */
:root[data-palette="classic"] {
  --primary:        #7C3AED;
  --primary-light:  #8B5CF6;
  --primary-dark:   #6D28D9;
  --primary-darker: #5B21B6;
  --primary-deep:   #4C1D95;
  --primary-soft:   #EDE9FE;
  --primary-soft-2: #DDD6FE;
  --primary-border: #C4B5FD;
  --accent:         #A78BFA;
  --primary-rgb:    124, 58, 237;

  --bg:             #F5F3FF;
  --surface2:       #F9F8FF;
  --border:         #E8E4F8;
  --text:           #1E1B2E;

  --shadow:    0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(124,58,237,.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,.12), 0 8px 32px rgba(124,58,237,.10);
}

/* ── 2026-10-31 추가: 봉진 님이 고른 팔레트 4종 ───────────────────
   각 팔레트의 6색을 그대로 쓰고, 화면에 필요한 단계(밝게·어둡게)만 그 사이에서 정했다. */

/* ── 미드나잇 스틸 (#06141B · #11212D · #253745 · #4A5C6A · #9BA8AB · #CCD0CF) */
:root[data-palette="midnight"] {
  --primary:        #253745;
  --primary-light:  #4A5C6A;
  --primary-dark:   #11212D;
  --primary-darker: #0C1A23;
  --primary-deep:   #06141B;
  --primary-soft:   #ECEFEF;
  --primary-soft-2: #DDE2E2;
  --primary-border: #B8C1C3;
  --accent:         #6F8089;
  --primary-rgb:    37, 55, 69;

  --bg:             #F4F6F6;
  --surface2:       #FAFBFB;
  --border:         #DDE2E2;
  --text:           #06141B;

  --shadow:    0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(37,55,69,.07);
  --shadow-md: 0 4px 12px rgba(0,0,0,.12), 0 8px 32px rgba(37,55,69,.11);
}

/* ── 플럼 로즈 (#190019 · #2B124C · #522B5B · #854F6C · #DFB6B2 · #FBE4D8) */
:root[data-palette="plum"] {
  --primary:        #522B5B;
  --primary-light:  #854F6C;
  --primary-dark:   #2B124C;
  --primary-darker: #220D3C;
  --primary-deep:   #190019;
  --primary-soft:   #FBEDE6;
  --primary-soft-2: #F6DCD3;
  --primary-border: #E6C3BE;
  --accent:         #A0687F;
  --primary-rgb:    82, 43, 91;

  --bg:             #FDF7F4;
  --surface2:       #FFFBF9;
  --border:         #EFDDD7;
  --text:           #190019;

  --shadow:    0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(82,43,91,.07);
  --shadow-md: 0 4px 12px rgba(0,0,0,.12), 0 8px 32px rgba(82,43,91,.11);
}

/* ── 오션 블루 (#021024 · #052659 · #5483B3 · #7DA0CA · #C1E8FF) */
:root[data-palette="ocean"] {
  --primary:        #052659;
  --primary-light:  #2F5F98;
  --primary-dark:   #031C45;
  --primary-darker: #021633;
  --primary-deep:   #021024;
  --primary-soft:   #E8F5FF;
  --primary-soft-2: #D3ECFF;
  --primary-border: #A9CDEB;
  --accent:         #5483B3;
  --primary-rgb:    5, 38, 89;

  --bg:             #F3F8FC;
  --surface2:       #F9FCFF;
  --border:         #D8E6F2;
  --text:           #021024;

  --shadow:    0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(5,38,89,.07);
  --shadow-md: 0 4px 12px rgba(0,0,0,.12), 0 8px 32px rgba(5,38,89,.11);
}

/* ── 블러시 민트 (#F7CBCA · #DDD3D3 · #F1F7F7 · #D5E5E5 · #B0D7D8 · #5D6B6B) */
:root[data-palette="blush"] {
  --primary:        #5D6B6B;
  --primary-light:  #748484;
  --primary-dark:   #4A5656;
  --primary-darker: #3E4949;
  --primary-deep:   #303939;
  --primary-soft:   #E7F1F1;
  --primary-soft-2: #D5E5E5;
  --primary-border: #B0D7D8;
  --accent:         #D98F8D;
  --primary-rgb:    93, 107, 107;

  --bg:             #F1F7F7;
  --surface2:       #F8FBFB;
  --border:         #DDE8E8;
  --text:           #2B3333;

  --shadow:    0 1px 3px rgba(0,0,0,.07), 0 4px 16px rgba(93,107,107,.07);
  --shadow-md: 0 4px 12px rgba(0,0,0,.11), 0 8px 32px rgba(93,107,107,.11);
}

/* ── 화면별 별칭 토큰 ─────────────────────────────────────
   각 HTML 이 쓰던 고유 변수명을 위 토큰으로 연결한다.
   :root[data-palette] 는 위 블록들과 동일 명시도이며 뒤에 오므로
   별칭이 항상 적용된다. (값 자체는 위에서 프리셋별로 이미 갈림)
   ───────────────────────────────────────────────────────── */
:root[data-palette] {
  /* kiosk.html */
  --purple:     var(--primary);
  --purple2:    var(--primary-light);
  --purple3:    var(--primary-dark);
  --purple-dim: var(--primary-deep);
  --bg-right:   var(--surface2);
  --text-dark:  var(--text);
}