/* tokens.css — 값만. 화면·부품은 이 이름만 쓴다(DESIGN.md). */
:root {
  /* 색: 차분한 남색 하나를 강조색으로 */
  --color-bg: #f5f6f8;
  --color-surface: #ffffff;
  --color-surface-2: #f0f2f5;
  --color-border: #dfe3e8;
  --color-border-strong: #c5ccd5;
  --color-text: #1b2230;
  --color-text-2: #4a5566;
  --color-text-3: #6b7686;
  --color-primary: #2f5bd3;
  --color-primary-hover: #244bb8;
  --color-primary-ink: #1f45ad;
  --color-primary-soft: #e8eefc;
  --color-success: #177a46;
  --color-success-soft: #e3f4ea;
  --color-warning: #8a5a00;
  --color-warning-soft: #fdf1d8;
  --color-danger: #c0362c;
  --color-danger-hover: #a52d24;
  --color-danger-soft: #fbe7e5;
  --color-neutral-soft: #eceff3;
  --color-focus: #2f5bd3;

  /* 관리자 틀 */
  --admin-side-bg: #18202e;
  --admin-side-text: #c9d1de;
  --admin-side-text-strong: #ffffff;
  --admin-side-active: #2a3446;
  --admin-badge-bg: #f2c94c;
  --admin-badge-text: #3d2e00;

  /* 간격 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;

  /* 글자 */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Consolas, monospace;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 15px;
  --text-lg: 17px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 32px;
  --leading-tight: 1.3;
  --leading-normal: 1.55;

  /* 모서리·그림자·높이 */
  --r-sm: 6px;
  --r: 8px;
  --r-lg: 12px;
  --r-full: 999px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
  --shadow: 0 4px 16px rgba(16, 24, 40, .10);
  --shadow-lg: 0 16px 40px rgba(16, 24, 40, .18);
  --control-h-sm: 36px;
  --control-h-md: 44px;
  --control-h-lg: 48px;

  --side-w: 232px;
  --header-h: 56px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #11151c;
    --color-surface: #181d26;
    --color-surface-2: #1f2530;
    --color-border: #2b3240;
    --color-border-strong: #3a4354;
    --color-text: #e8ecf2;
    --color-text-2: #b6bfcc;
    --color-text-3: #8f9aab;
    --color-primary: #6f93f0;
    --color-primary-hover: #86a5f4;
    --color-primary-ink: #9db6f6;
    --color-primary-soft: #1f2a44;
    --color-success: #5ccb8a;
    --color-success-soft: #173326;
    --color-warning: #f0c060;
    --color-warning-soft: #3a2f14;
    --color-danger: #f07a70;
    --color-danger-hover: #f4958d;
    --color-danger-soft: #3d1d1b;
    --color-neutral-soft: #262c37;
    --color-focus: #86a5f4;
    --admin-side-bg: #0c1017;
    --admin-side-active: #1e2633;
  }
}