/* mailhub 디자인 토큰 — 값만 둔다(DESIGN.md). 부품·화면은 이 이름만 쓴다. 이름은 mih_tool 토큰과 같다(부품 재사용).
   방향: 개발자 도구 콘솔(Resend·Postmark·Linear 의 정돈감). 슬레이트 중립색 + 먹색 주 단추 + 파랑 링크.
   색은 「뜻」에만 쓴다 — 상태 6가지(neutral·info·ok·warn·bad·report)는 글자·아이콘과 늘 함께. 그라데이션 없음.
   라이트가 기본, 다크는 시스템 설정 또는 data-theme="dark". */

:root {
  /* 바탕·글자 — text-3 도 흰 바탕 대비 4.5 이상 */
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #f2f4f7;
  --surface-3: #e8ebf0;
  --text: #101828;
  --text-2: #475467;
  --text-3: #5d6779;
  --border: #e4e7ec;
  --border-strong: #cfd4dc;
  --overlay: rgba(16, 24, 40, .48);

  /* 주색 — 단추는 먹색(차분하게), 링크·포커스·선택은 파랑 */
  --primary: #101828;
  --primary-hover: #1f2a3d;
  --on-primary: #ffffff;
  --primary-ink: #1d4ed8;
  --primary-soft: #eef3ff;
  --primary-line: #c6d6fd;
  --focus: #2563eb;
  --brand: #3b5bdb;          /* 로고 심볼 한 곳 */

  /* 사이드바 */
  --side-bg: #fbfbfc;
  --side-border: #e9ecf0;
  --side-text: #3d4655;
  --side-hover: #f0f2f5;
  --side-active-bg: #eceff3;
  --side-active-text: #101828;

  /* 상태(뜻 있는 색) — fg 는 글자·아이콘, bg 는 옅은 바탕 */
  --st-neutral: #475467; --st-neutral-bg: #f0f2f5;
  --st-info: #1d4ed8;    --st-info-bg: #eef3ff;
  --st-ok: #067647;      --st-ok-bg: #e9f8ef;
  --st-warn: #8a4b04;    --st-warn-bg: #fff6e0;
  --st-bad: #b42318;     --st-bad-bg: #fdeeec;
  --st-report: #a3195b;  --st-report-bg: #fcedf5;

  /* 알림 상자·단추에서 쓰는 이름(mih_tool 부품과 같은 이름) */
  --success: var(--st-ok);      --success-soft: var(--st-ok-bg);
  --warn: var(--st-warn);       --warn-soft: var(--st-warn-bg);   --warn-strong: #9a5204;
  --danger: var(--st-bad);      --danger-soft: var(--st-bad-bg);  --on-danger: #ffffff;

  /* 툴팁·토스트(라이트는 짙은 바탕) */
  --tip-bg: #101828;
  --tip-text: #f5f7fa;
  --tip-ok: #6ee7a8;
  --tip-err: #ff9d94;
  --tip-warn: #ffcf70;

  /* 코드 블록 */
  --code-bg: #0f1520;
  --code-text: #dfe5ee;

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

  /* 글자 — 본문 15(콘솔). 12px 미만 없음 */
  --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.6;
  --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;
  --tracking-tight: -0.015em;
  --font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, 'Liberation Mono', monospace;   /* 키·주소·DNS 값에만(한글 넣지 않음) */

  /* 모서리·그림자·높이 */
  --r-sm: 6px; --r: 8px; --r-lg: 12px; --r-full: 999px;
  --shadow-1: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-card: 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-2: 0 16px 40px -12px rgba(16, 24, 40, .28);
  --control-h-sm: 40px; --control-h-md: 44px; --control-h-lg: 48px;   /* 누르는 것은 40 이상(§8-1) */

  /* 폭 */
  --side-w: 232px;
  --topbar-h: 56px;
  --page-max: 1200px;
  --gutter: 16px;

  /* 움직임 */
  --dur: 140ms;
  --ease: cubic-bezier(.2, .7, .2, 1);

  color-scheme: light;
}

@media (min-width: 600px) { :root { --gutter: 28px; } }

/* 다크 — 시스템 설정(사용자가 라이트를 고르지 않았을 때)과 직접 고름은 같은 값 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1015; --surface: #141920; --surface-2: #1a2029; --surface-3: #232a35;
    --text: #e7eaf0; --text-2: #b0b9c7; --text-3: #949eaf;
    --border: #242b36; --border-strong: #353e4c; --overlay: rgba(0, 0, 0, .62);
    --primary: #e7eaf0; --primary-hover: #ffffff; --on-primary: #0d1015;
    --primary-ink: #93b4ff; --primary-soft: #18233d; --primary-line: #2d4374; --focus: #7ea4ff; --brand: #7c9cff;
    --side-bg: #11151b; --side-border: #1f252e; --side-text: #b0b9c7; --side-hover: #1a2029; --side-active-bg: #212833; --side-active-text: #ffffff;
    --st-neutral: #b4bccb; --st-neutral-bg: #222934;
    --st-info: #93b4ff;    --st-info-bg: #172239;
    --st-ok: #5fd49a;      --st-ok-bg: #0f2a1f;
    --st-warn: #f3c062;    --st-warn-bg: #2e2412;
    --st-bad: #ff8f86;     --st-bad-bg: #35171a;
    --st-report: #f497c8;  --st-report-bg: #34172b;
    --warn-strong: #f3c062; --on-danger: #1b0505;
    --tip-bg: #e7eaf0; --tip-text: #101828; --tip-ok: #067647; --tip-err: #b42318; --tip-warn: #8a4b04;
    --code-bg: #0a0d12; --code-text: #dfe5ee;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .3); --shadow-card: 0 1px 2px rgba(0, 0, 0, .25); --shadow-2: 0 18px 44px -16px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0d1015; --surface: #141920; --surface-2: #1a2029; --surface-3: #232a35;
  --text: #e7eaf0; --text-2: #b0b9c7; --text-3: #949eaf;
  --border: #242b36; --border-strong: #353e4c; --overlay: rgba(0, 0, 0, .62);
  --primary: #e7eaf0; --primary-hover: #ffffff; --on-primary: #0d1015;
  --primary-ink: #93b4ff; --primary-soft: #18233d; --primary-line: #2d4374; --focus: #7ea4ff; --brand: #7c9cff;
  --side-bg: #11151b; --side-border: #1f252e; --side-text: #b0b9c7; --side-hover: #1a2029; --side-active-bg: #212833; --side-active-text: #ffffff;
  --st-neutral: #b4bccb; --st-neutral-bg: #222934;
  --st-info: #93b4ff;    --st-info-bg: #172239;
  --st-ok: #5fd49a;      --st-ok-bg: #0f2a1f;
  --st-warn: #f3c062;    --st-warn-bg: #2e2412;
  --st-bad: #ff8f86;     --st-bad-bg: #35171a;
  --st-report: #f497c8;  --st-report-bg: #34172b;
  --warn-strong: #f3c062; --on-danger: #1b0505;
  --tip-bg: #e7eaf0; --tip-text: #101828; --tip-ok: #067647; --tip-err: #b42318; --tip-warn: #8a4b04;
  --code-bg: #0a0d12; --code-text: #dfe5ee;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .3); --shadow-card: 0 1px 2px rgba(0, 0, 0, .25); --shadow-2: 0 18px 44px -16px rgba(0, 0, 0, .7);
  color-scheme: dark;
}