/* ============================================================
   tokens.css — 디자인 토큰 단일 진원지 (Single Source of Truth)
   생성 2026-08-08
   ------------------------------------------------------------
   [왜 만들었나]
   토큰 141종 중 78종이 dashboard/common/dashboard-premium/design-system
   4개 파일에 흩어져 중복 정의돼 있었다(--primary 는 8곳). 그래서
   "색을 바꿨는데 화면이 안 바뀌는" 일이 반복됐고, 결국 !important 로
   덮는 습관이 생겨 전역 CSS 10,224줄 중 2,692줄이 !important 가 됐다.
   → 전역 토큰은 이 파일에서만 정의한다. 다른 파일에서 정의하지 말 것.

   [값의 출처]
   기존 캐스케이드에서 '실제로 이기던 값'을 계산해 그대로 옮겼다.
   각 줄 끝 주석이 원래 어느 파일에서 이기고 있었는지 표시한다.
   ⇒ 이 파일 도입만으로는 화면이 1픽셀도 바뀌지 않는 것이 정상이다.

   [로드 순서]
   반드시 다른 CSS보다 먼저 로드할 것(header.php 최상단).
   컴포넌트 지역 변수(saas.css 의 --kpi-accent, redesign-v2.css 의
   body.rd2 스코프 등)는 여기 없다 — 그건 각 컴포넌트 소유다.
   ============================================================ */

/* ── 라이트(기본) ───────────────────────────────────────── */
:root {
  /* 1. 브랜드 액센트 */
  --ac: var(--brand);                                   /* ←design-system.css */
  --ac-h: color-mix(in oklab, var(--brand), #000 14%);  /* ←design-system.css */
  --ac-l: color-mix(in oklab, var(--brand), #fff 90%);  /* ←design-system.css */
  --accent: #00D2D3;                                    /* ←common.css */
  --accent-light: #55E6C1;                              /* ←common.css */
  --accent-line: color-mix(in oklab, var(--brand), #fff 74%);/* ←design-system.css */
  --brand: #6B6198;                                     /* ←design-system.css */
  --primary: var(--brand);                              /* ←design-system.css */
  --primary-100: #EDE9FE;                               /* ←dashboard-premium.css */
  --primary-200: #DDD6FE;                               /* ←dashboard-premium.css */
  --primary-300: #C4B5FD;                               /* ←dashboard-premium.css */
  --primary-400: #A78BFA;                               /* ←dashboard-premium.css */
  --primary-50: #F5F3FF;                                /* ←dashboard-premium.css */
  --primary-500: var(--brand);                          /* ←design-system.css */
  --primary-600: var(--brand);                          /* ←design-system.css */
  --primary-700: #5A5187;                               /* ←dashboard-premium.css */
  --primary-800: #453B6E;                               /* ←dashboard-premium.css */
  --primary-900: #312A52;                               /* ←dashboard-premium.css */
  --primary-dark: color-mix(in oklab, var(--brand), #000 16%);/* ←design-system.css */
  --primary-deep: #5A5187;                              /* ←common.css */
  --primary-glow: rgba(107,97,152,0.35);                /* ←common.css */
  --primary-light: color-mix(in oklab, var(--brand), #fff 22%);/* ←design-system.css */
  --primary-soft: rgba(107,97,152, 0.13);               /* ←saas.css */
  --shadow-glow-primary: 0 4px 24px rgba(148, 163, 184, 0.12);/* ←dashboard-premium.css */
  --text-primary: #15151b;                              /* ←design-system.css */
  /* 2. 의미색 */
  --amber: oklch(0.65 0.14 70);                         /* ←design-system.css */
  --danger: var(--danger-500);                          /* ←dashboard-premium.css */
  --danger-50: #FEF2F2;                                 /* ←dashboard-premium.css */
  --danger-500: #EF4444;                                /* ←dashboard-premium.css */
  --danger-600: #DC2626;                                /* ←dashboard-premium.css */
  --danger-light: rgba(255,107,107,.08);                /* ←common.css */
  --down: oklch(0.57 0.19 22);                          /* ←design-system.css */
  --down-soft: oklch(0.965 0.03 22);                    /* ←design-system.css */
  --info: var(--info-500);                              /* ←dashboard-premium.css */
  --info-50: #EFF6FF;                                   /* ←dashboard-premium.css */
  --info-500: #0EA5E9;                                  /* ←dashboard-premium.css */
  --info-600: #0284C7;                                  /* ←dashboard-premium.css */
  --success: var(--success-500);                        /* ←dashboard-premium.css */
  --success-50: #ECFDF5;                                /* ←dashboard-premium.css */
  --success-500: #10B981;                               /* ←dashboard-premium.css */
  --success-600: #059669;                               /* ←dashboard-premium.css */
  --success-light: rgba(0,210,106,.08);                 /* ←common.css */
  --up: oklch(0.55 0.15 150);                           /* ←design-system.css */
  --up-soft: oklch(0.96 0.04 150);                      /* ←design-system.css */
  --warning: var(--warning-500);                        /* ←dashboard-premium.css */
  --warning-50: #FFFBEB;                                /* ←dashboard-premium.css */
  --warning-500: #F59E0B;                               /* ←dashboard-premium.css */
  --warning-600: #D97706;                               /* ←dashboard-premium.css */
  /* 3. 텍스트 */
  --text-2xl: 24px;                                     /* ←dashboard.css */
  --text-3xl: 30px;                                     /* ←dashboard.css */
  --text-base: 14px;                                    /* ←dashboard.css */
  --text-dim: #9B97B8;                                  /* ←common.css */
  --text-lg: 17px;                                      /* ←dashboard.css */
  --text-md: 15px;                                      /* ←dashboard.css */
  --text-muted: #90909f;                                /* ←design-system.css */
  --text-secondary: #5b5b6a;                            /* ←design-system.css */
  --text-sm: 13px;                                      /* ←dashboard.css */
  --text-tertiary: #90909f;                             /* ←design-system.css */
  --text-white: #1A1640;                                /* ←common.css */
  --text-xl: 20px;                                      /* ←dashboard.css */
  --text-xs: 11px;                                      /* ←dashboard.css */
  /* 4. 선 */
  --border: #e8e8ee;                                    /* ←design-system.css */
  --border-focus: var(--brand);                         /* ←design-system.css */
  --border-light: #f0f0f4;                              /* ←design-system.css */
  --card-border: #e8e8ee;                               /* ←design-system.css */
  --dark-border: rgba(107,97,152,0.1);                  /* ←common.css */
  --glass-border: rgba(148, 163, 184, 0.25);            /* ←dashboard-premium.css */
  --input-border: #DDD5F2;                              /* ←common.css */
  --line: #e8e8ee;                                      /* ←design-system.css */
  --line2: #d9d9e2;                                     /* ←design-system.css */
  /* 5. 면/배경 */
  --card-alt: #F5F0FF;                                  /* ←common.css */
  --card-bg: #ffffff;                                   /* ←design-system.css */
  --card-bg-elevated: #ffffff;                          /* ←design-system.css */
  --card-body: #4A3D6E;                                 /* ←common.css */
  --card-dim: #C0B5DE;                                  /* ←common.css */
  --card-hover: #f0f0f4;                                /* ←design-system.css */
  --card-shadow: var(--shadow);                         /* ←design-system.css */
  --card-sub: #7B6FA5;                                  /* ←common.css */
  --card-title: #2D1B69;                                /* ←common.css */
  --dark-bg: #f4f4f7;                                   /* ←design-system.css */
  --dark-surface: #E8E5FC;                              /* ←common.css */
  --glass-bg: rgba(255, 255, 255, 0.88);                /* ←dashboard-premium.css */
  --input-bg: #F8F5FF;                                  /* ←common.css */
  --sunken: #f0f0f4;                                    /* ←design-system.css */
  --surface: #ffffff;                                   /* ←design-system.css */
  --surface2: #fafafa;                                  /* ←design-system.css */
  /* 6. 그림자 */
  --input-focus-shadow: 0 0 0 4px rgba(107,97,152,0.1); /* ←common.css */
  --shadow: 0 1px 2px rgba(20,20,40,.04), 0 8px 24px -12px rgba(20,20,40,.10);/* ←design-system.css */
  --shadow-glow: 0 0 30px rgba(148, 163, 184, 0.08);    /* ←dashboard-premium.css */
  --shadow-lg: var(--shadow-lift);                      /* ←design-system.css */
  --shadow-lift: 0 2px 4px rgba(20,20,40,.05), 0 18px 40px -18px rgba(20,20,40,.18);/* ←design-system.css */
  --shadow-md: 0 2px 4px rgba(20,20,40,.05), 0 12px 30px -14px rgba(20,20,40,.14);/* ←design-system.css */
  --shadow-sm: var(--shadow);                           /* ←design-system.css */
  --shadow-xl: 0 2px 4px rgba(20,20,40,.05), 0 28px 60px -24px rgba(20,20,40,.22);/* ←design-system.css */
  --shadow-xs: 0 1px 2px rgba(20,20,40,.04);            /* ←design-system.css */
  /* 7. 라운드 */
  --radius-full: 9999px;                                /* ←dashboard.css */
  --radius-lg: 16px;                                    /* ←dashboard-premium.css */
  --radius-md: 12px;                                    /* ←dashboard-premium.css */
  --radius-sm: 8px;                                     /* ←dashboard-premium.css */
  --radius-xl: 24px;                                    /* ←dashboard-premium.css */
  /* 8. 타이포/간격 */
  --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;/* ←dashboard.css */
  --font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans KR', sans-serif;/* ←dashboard.css */
  --leading-normal: 1.5;                                /* ←dashboard.css */
  --leading-relaxed: 1.65;                              /* ←dashboard.css */
  --leading-tight: 1.25;                                /* ←dashboard.css */
  --space-1: 4px;                                       /* ←dashboard.css */
  --space-10: 40px;                                     /* ←dashboard.css */
  --space-12: 48px;                                     /* ←dashboard.css */
  --space-2: 8px;                                       /* ←dashboard.css */
  --space-3: 12px;                                      /* ←dashboard.css */
  --space-4: 16px;                                      /* ←dashboard.css */
  --space-5: 20px;                                      /* ←dashboard.css */
  --space-6: 24px;                                      /* ←dashboard.css */
  --space-8: 32px;                                      /* ←dashboard.css */
  /* 9. 기타 */
  --duration-fast: 180ms;                               /* ←dashboard-premium.css */
  --duration-normal: 300ms;                             /* ←dashboard-premium.css */
  --duration-slow: 500ms;                               /* ←dashboard-premium.css */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);        /* ←dashboard.css */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);           /* ←dashboard-premium.css */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);     /* ←dashboard-premium.css */
  --gray-100: #F4F4F5;                                  /* ←dashboard-premium.css */
  --gray-200: #E4E4E7;                                  /* ←dashboard-premium.css */
  --gray-300: #D4D4D8;                                  /* ←dashboard-premium.css */
  --gray-400: #A1A1AA;                                  /* ←dashboard-premium.css */
  --gray-50: #FAFAFA;                                   /* ←dashboard-premium.css */
  --gray-500: #71717A;                                  /* ←dashboard-premium.css */
  --gray-600: #52525B;                                  /* ←dashboard-premium.css */
  --gray-700: #3F3F46;                                  /* ←dashboard-premium.css */
  --gray-800: #2C2C31;                                  /* ←dashboard-premium.css */
  --gray-850: #242428;                                  /* ←dashboard-premium.css */
  --gray-900: #1C1C20;                                  /* ←dashboard-premium.css */
  --gray-950: #161619;                                  /* ←dashboard-premium.css */
  --secondary: var(--success-500);                      /* ←dashboard-premium.css */
}

/* ── 다크 ──────────────────────────────────────────────── */
[data-theme="dark"] {
  /* 1. 브랜드 액센트 */
  --ac: var(--brand-d);                                 /* ←design-system.css */
  --ac-h: color-mix(in oklab, var(--brand-d), #fff 16%);/* ←design-system.css */
  --ac-l: color-mix(in oklab, var(--brand-d), #000 78%);/* ←design-system.css */
  --accent: #00D2D3;                                    /* ←common.css */
  --accent-light: #55E6C1;                              /* ←common.css */
  --brand-d: #7C72B1;                                   /* ←design-system.css */
  --primary: var(--brand-d);                            /* ←design-system.css */
  --primary-100: #EDE9FE;                               /* ←dashboard-premium.css */
  --primary-200: #DDD6FE;                               /* ←dashboard-premium.css */
  --primary-300: #8A80B8;                               /* ←dashboard-premium.css */
  --primary-400: #7A6FA6;                               /* ←dashboard-premium.css */
  --primary-50: #F5F3FF;                                /* ←dashboard-premium.css */
  --primary-500: var(--brand-d);                        /* ←design-system.css */
  --primary-600: var(--brand-d);                        /* ←design-system.css */
  --primary-700: #4E4573;                               /* ←dashboard-premium.css */
  --primary-800: #3D365E;                               /* ←dashboard-premium.css */
  --primary-900: #2C2645;                               /* ←dashboard-premium.css */
  --primary-dark: #4E4573;                              /* ←dashboard-premium.css */
  --primary-deep: #5A5187;                              /* ←common.css */
  --primary-glow: rgba(107,97,152,0.35);                /* ←common.css */
  --primary-light: #8880AE;                             /* ←dashboard-premium.css */
  --primary-soft: rgba(107,97,152, 0.16);               /* ←saas.css */
  --shadow-glow-primary: 0 4px 24px rgba(148, 163, 184, 0.2);/* ←dashboard-premium.css */
  --text-primary: #f1f1f5;                              /* ←design-system.css */
  /* 2. 의미색 */
  --amber: oklch(0.78 0.13 75);                         /* ←design-system.css */
  --danger: var(--danger-500);                          /* ←dashboard-premium.css */
  --danger-50: #FEF2F2;                                 /* ←dashboard-premium.css */
  --danger-500: #EF4444;                                /* ←dashboard-premium.css */
  --danger-600: #DC2626;                                /* ←dashboard-premium.css */
  --danger-light: rgba(255,107,107,.1);                 /* ←common.css */
  --down: oklch(0.70 0.16 22);                          /* ←design-system.css */
  --down-soft: oklch(0.30 0.07 22);                     /* ←design-system.css */
  --info: var(--info-500);                              /* ←dashboard-premium.css */
  --info-50: #EFF6FF;                                   /* ←dashboard-premium.css */
  --info-500: #0EA5E9;                                  /* ←dashboard-premium.css */
  --info-600: #0284C7;                                  /* ←dashboard-premium.css */
  --success: var(--success-500);                        /* ←dashboard-premium.css */
  --success-50: #ECFDF5;                                /* ←dashboard-premium.css */
  --success-500: #10B981;                               /* ←dashboard-premium.css */
  --success-600: #059669;                               /* ←dashboard-premium.css */
  --success-light: rgba(0,210,106,.12);                 /* ←common.css */
  --up: oklch(0.72 0.15 152);                           /* ←design-system.css */
  --up-soft: oklch(0.28 0.06 152);                      /* ←design-system.css */
  --warning: var(--warning-500);                        /* ←dashboard-premium.css */
  --warning-50: #FFFBEB;                                /* ←dashboard-premium.css */
  --warning-500: #F59E0B;                               /* ←dashboard-premium.css */
  --warning-600: #D97706;                               /* ←dashboard-premium.css */
  /* 3. 텍스트 */
  --text-2xl: 24px;                                     /* ←dashboard.css */
  --text-3xl: 30px;                                     /* ←dashboard.css */
  --text-base: 14px;                                    /* ←dashboard.css */
  --text-dim: #6B6790;                                  /* ←common.css */
  --text-lg: 17px;                                      /* ←dashboard.css */
  --text-md: 15px;                                      /* ←dashboard.css */
  --text-muted: #6f6f80;                                /* ←design-system.css */
  --text-secondary: #a2a2b2;                            /* ←design-system.css */
  --text-sm: 13px;                                      /* ←dashboard.css */
  --text-tertiary: #6f6f80;                             /* ←design-system.css */
  --text-white: #F8F7FF;                                /* ←common.css */
  --text-xl: 20px;                                      /* ←dashboard.css */
  --text-xs: 11px;                                      /* ←dashboard.css */
  /* 4. 선 */
  --border: #25252f;                                    /* ←design-system.css */
  --border-focus: var(--brand-d);                       /* ←design-system.css */
  --border-light: #1e1e26;                              /* ←design-system.css */
  --card-border: #25252f;                               /* ←design-system.css */
  --dark-border: rgba(107,97,152,0.15);                 /* ←common.css */
  --glass-border: #30363d;                              /* ←dashboard-premium.css */
  --input-border: rgba(107,97,152,0.18);                /* ←common.css */
  --line: #25252f;                                      /* ←design-system.css */
  --line2: #32323f;                                     /* ←design-system.css */
  /* 5. 면/배경 */
  --card-alt: rgba(107,97,152,.06);                     /* ←common.css */
  --card-bg: #14141b;                                   /* ←design-system.css */
  --card-bg-elevated: #191921;                          /* ←design-system.css */
  --card-body: #C5BEE0;                                 /* ←common.css */
  --card-dim: #5A5580;                                  /* ←common.css */
  --card-hover: #191921;                                /* ←design-system.css */
  --card-shadow: var(--shadow);                         /* ←design-system.css */
  --card-sub: #9B97B8;                                  /* ←common.css */
  --card-title: #F0ECFF;                                /* ←common.css */
  --dark-bg: #0a0a0e;                                   /* ←design-system.css */
  --dark-surface: #13122A;                              /* ←common.css */
  --glass-bg: #0d1117;                                  /* ←dashboard-premium.css */
  --input-bg: rgba(107,97,152,0.06);                    /* ←common.css */
  --sunken: #101017;                                    /* ←design-system.css */
  --surface: #14141b;                                   /* ←design-system.css */
  --surface2: #191921;                                  /* ←design-system.css */
  /* 6. 그림자 */
  --input-focus-shadow: 0 0 0 4px rgba(107,97,152,0.2); /* ←common.css */
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.6);/* ←design-system.css */
  --shadow-glow: 0 0 30px rgba(148, 163, 184, 0.12);    /* ←dashboard-premium.css */
  --shadow-lg: var(--shadow-lift);                      /* ←design-system.css */
  --shadow-lift: 0 2px 6px rgba(0,0,0,.5), 0 22px 50px -20px rgba(0,0,0,.8);/* ←design-system.css */
  --shadow-md: 0 2px 6px rgba(0,0,0,.5), 0 14px 34px -16px rgba(0,0,0,.7);/* ←design-system.css */
  --shadow-sm: var(--shadow);                           /* ←design-system.css */
  --shadow-xl: 0 2px 6px rgba(0,0,0,.5), 0 30px 64px -24px rgba(0,0,0,.85);/* ←design-system.css */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.4);                /* ←design-system.css */
  /* 7. 라운드 */
  --radius-full: 9999px;                                /* ←dashboard.css */
  --radius-lg: 16px;                                    /* ←dashboard-premium.css */
  --radius-md: 12px;                                    /* ←dashboard-premium.css */
  --radius-sm: 8px;                                     /* ←dashboard-premium.css */
  --radius-xl: 24px;                                    /* ←dashboard-premium.css */
  /* 8. 타이포/간격 */
  --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;/* ←dashboard.css */
  --font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans KR', sans-serif;/* ←dashboard.css */
  --leading-normal: 1.5;                                /* ←dashboard.css */
  --leading-relaxed: 1.65;                              /* ←dashboard.css */
  --leading-tight: 1.25;                                /* ←dashboard.css */
  --space-1: 4px;                                       /* ←dashboard.css */
  --space-10: 40px;                                     /* ←dashboard.css */
  --space-12: 48px;                                     /* ←dashboard.css */
  --space-2: 8px;                                       /* ←dashboard.css */
  --space-3: 12px;                                      /* ←dashboard.css */
  --space-4: 16px;                                      /* ←dashboard.css */
  --space-5: 20px;                                      /* ←dashboard.css */
  --space-6: 24px;                                      /* ←dashboard.css */
  --space-8: 32px;                                      /* ←dashboard.css */
  /* 9. 기타 */
  --duration-fast: 180ms;                               /* ←dashboard-premium.css */
  --duration-normal: 300ms;                             /* ←dashboard-premium.css */
  --duration-slow: 500ms;                               /* ←dashboard-premium.css */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);        /* ←dashboard.css */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);           /* ←dashboard-premium.css */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);     /* ←dashboard-premium.css */
  --gray-100: #F4F4F5;                                  /* ←dashboard-premium.css */
  --gray-200: #E4E4E7;                                  /* ←dashboard-premium.css */
  --gray-300: #D4D4D8;                                  /* ←dashboard-premium.css */
  --gray-400: #A1A1AA;                                  /* ←dashboard-premium.css */
  --gray-50: #FAFAFA;                                   /* ←dashboard-premium.css */
  --gray-500: #71717A;                                  /* ←dashboard-premium.css */
  --gray-600: #52525B;                                  /* ←dashboard-premium.css */
  --gray-700: #3F3F46;                                  /* ←dashboard-premium.css */
  --gray-800: #2C2C31;                                  /* ←dashboard-premium.css */
  --gray-850: #242428;                                  /* ←dashboard-premium.css */
  --gray-900: #1C1C20;                                  /* ←dashboard-premium.css */
  --gray-950: #161619;                                  /* ←dashboard-premium.css */
  --secondary: var(--success-500);                      /* ←dashboard-premium.css */
}