/* Quanect Design Tokens — 단일 출처.
   출처: quanect-brand-page(app/globals.css), quanect-cloud(app.css), PersonalDesignGuide.
   규칙: 컴포넌트는 이 파일의 시맨틱 토큰만 쓴다. 색 hex/oklch를 컴포넌트에 직접 쓰지 않는다.
   다크가 기본, 라이트는 <html data-theme="light">. 크기·굵기는 두 모드가 같고 색만 바뀐다.
   수정 후: python scripts/check-contrast.py */

:root {
  color-scheme: dark;

  /* 브랜드 (로고·장식 전용. 글자에 쓰지 않는다) */
  --brand: #2AC4CC;

  /* 표면 */
  --bg:           oklch(0.17 0.01 250);
  --surface:      oklch(0.22 0.01 250);   /* 카드·분할 화면의 한쪽 영역. bg와 눈에 띄게 구분되는 단계 */
  --surface-2:    oklch(0.26 0.01 250);   /* 입력창, 칩, hover */
  --surface-inset:oklch(0.19 0.01 250);   /* 코드블록, 패널 안쪽 */
  --border:       oklch(0.44 0.01 250);   /* 아이콘 버튼·아바타 테두리. soft < border < strong */
  --border-soft:  oklch(0.38 0.01 250);   /* 헤더 아래 선, 표 행 선. 바탕 1.80:1 · 카드 1.63:1 */
  --border-strong:oklch(0.54 0.01 250);   /* 입력창·체크박스 테두리 (3:1) */
  --overlay:      rgba(8, 7, 6, 0.62);

  /* 글자 */
  --text:       oklch(0.94 0.005 250);
  --text-muted: oklch(0.72 0.01 250);
  --text-faint: oklch(0.65 0.01 250);

  /* Primary (청록) — 주요 버튼, 링크, 선택·활성·성공 상태 */
  --primary:        oklch(0.75 0.12 200);
  --primary-hover:  oklch(0.80 0.12 200);
  --primary-text:   oklch(0.75 0.12 200);   /* 글자·아이콘용 (라이트에서 더 진해짐) */
  --primary-soft:   rgba(42, 196, 204, 0.13);   /* 포커스 링·텍스트 선택 전용. 상태 배경에 쓰지 않는다 */
  --on-primary:     oklch(0.12 0.01 250);   /* 채움 위 글자. 흰색 하드코딩 금지 */

  /* 오류 */
  --danger-text:  #f09691;
  --danger-solid: #c9453f;
  --danger-hover: #d65a54;
  --on-danger:    #ffffff;

  /* 주의 */
  --warning-text: #e6bc62;

  /* 성공·정보는 별도 색 없이 Primary를 공유한다. 상태는 배경 없이 글자색 + 아이콘으로만 표시 */
  --success-text: var(--primary-text);
  --info-text:    var(--primary-text);

  /* 서버 상태 */
  --st-running:  var(--success-text);
  --st-creating: var(--text-muted);
  --st-stopped:  var(--text-faint);
  --st-warning:  var(--warning-text);
  --st-error:    var(--danger-text);

  /* 포커스: 윤곽선은 3:1 필요 → 라이트에서는 진한 청록 */
  --focus: var(--primary);
  --ring: 0 0 0 3px var(--primary-soft);

  /* 글꼴 — Geist는 한글 글리프가 없어 Pretendard로 이어진다 */
  --font-sans: "Geist", "Pretendard Variable", Pretendard, "Segoe UI Variable Display", "Segoe UI",
               -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --font-mono: "Geist Mono", "SF Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* 타이포: 크기 / 행간. 굵기는 400·600·700만 쓴다 */
  --fs-display: clamp(2rem, 4vw, 2.5rem);  --lh-display: 1.2;   /* 700, -0.03em */
  --fs-title-1: 1.75rem;                   --lh-title-1: 1.3;   /* 700, -0.02em */
  --fs-title-2: 1.25rem;                   --lh-title-2: 1.4;   /* 600, -0.02em */
  --fs-body:    1rem;                      --lh-body:    1.6;   /* 400 / 강조 600 */
  --fs-body-sm: 0.9375rem;                 --lh-body-sm: 1.55;  /* 콘솔·표·보조 본문 */
  --fs-caption: 0.8125rem;                 --lh-caption: 1.5;
  --fw-regular: 400;  --fw-semibold: 600;  --fw-bold: 700;

  /* 간격 (4px 기반) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px;

  /* 레이아웃 */
  --maxw: 1280px;        /* 콘솔·랜딩 */
  --maxw-narrow: 440px;  /* 로그인·동의 같은 단일 목적 화면 */
  --gutter: 24px;        /* 640px 이하 20px */
  --panel-padding: 24px; /* 640px 이하 20px */
  --header-height: 64px;
  --touch-min: 44px;    /* 기본 버튼·입력의 터치 높이 */
  --control-sm: 36px;   /* 작은 버튼(btn--sm)과 아이콘 버튼의 공통 높이. 같은 줄에 놓아도 높이가 같다 */

  /* 모서리 */
  --radius-sm: 6px;   /* 입력·버튼 */
  --radius:    10px;  /* 카드 */
  --radius-lg: 14px;  /* 큰 패널, 모달 */
  --radius-full: 9999px; /* 배지, 아바타 */

  /* 그림자: 기본은 없음. 경계는 surface 차이와 border로 */
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.24);   /* 드롭다운, 팝오버 */
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.36);   /* 모달 */
  --shadow-header: 0 2px 14px rgba(0, 0, 0, 0.55);   /* 헤더 아래 구분. 선 대신 그림자 */

  /* 모션 */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;  /* hover, press */
  --dur: 200ms;       /* 기본 */
  --dur-slow: 250ms;  /* 모달, 화면 전환 */

  /* 레이어 */
  --z-header: 30; --z-menu: 40; --z-modal: 50; --z-toast: 60;
}

:root[data-theme="light"] {
  color-scheme: light;

  --bg:           #f1f4f6;
  --surface:      #ffffff;
  --surface-2:    #eaf0f3;
  --surface-inset:#f9fbfc;
  --border:       #b3bfc9;
  --border-soft:  #c2cdd5;               /* 바탕 1.46:1 · 카드 1.62:1 */
  --border-strong:#7d8d98;
  --overlay:      rgba(26, 25, 23, 0.4);

  --text:       #121a22;
  --text-muted: #52616c;
  --text-faint: #5f6f7a;

  --primary-hover: oklch(0.70 0.12 200);
  --primary-text:  #0a7981;
  --focus:         #0a7981;
  --primary-soft:  rgba(42, 196, 204, 0.16);

  --danger-text:  #b3302c;
  --danger-solid: #c9453f;
  --danger-hover: #b93a36;

  --warning-text: #8a5b00;

  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-header: 0 2px 14px rgba(20, 40, 55, 0.12);
}

@media (max-width: 640px) {
  :root { --gutter: 20px; --panel-padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }
}