/* 온퍼널스 디자인 값 (1028 초안, 로고 보라 반영)
   규칙: 화면 CSS 는 아래 「쓰는 값」만 쓴다. 「원재료」 색을 직접 쓰지 않는다.
   어두운 화면은 「쓰는 값」만 다시 정의한다. */

:root {
  /* ── 원재료: 회색 ── */
  /* 1028 아정당 디자인 실측(ajd.co.kr): 글자 #1F2429 → #575E64 → #8C939A → #ACB3BA, 바탕 #F4F6FA */
  --gray-0: #ffffff;
  --gray-25: #f8f9fb;
  --gray-50: #f4f6fa;
  --gray-100: #ecf0f4;
  --gray-200: #dde2e7;
  --gray-300: #c4cad1;
  --gray-400: #8c939a;
  --gray-500: #6e757c;
  --gray-600: #575e64;
  --gray-700: #353a3f;
  --gray-800: #262b30;
  --gray-900: #1f2429;

  /* ── 원재료: 온퍼널스 보라 (로고 막대 3개: #6600FF / #8A4FFF / #BB99FF) ── */
  --purple-50: #f2ecff;
  --purple-100: #e6d9ff;
  --purple-300: #bb99ff;
  --purple-400: #8a4fff;
  --purple-500: #6600ff;
  --purple-600: #5500d6;
  --purple-700: #4600b0;

  /* ── 원재료: 주황 (보조) ── */
  --orange-50: #fff4ec;
  --orange-100: #ffe3cf;
  --orange-500: #ff7a2f;
  --orange-600: #f0661a;
  --orange-700: #c94f0e;

  /* ── 원재료: 단계 3묶음 색 ── */
  --blue-50: #eef4ff;
  --blue-500: #3d7bff;
  --blue-700: #2457c9;
  --green-50: #ebf9f1;
  --green-500: #17b26a;
  --green-700: #0b7f4a;
  --red-50: #fff1f0;
  --red-500: #f04438;
  --red-700: #b42318;
  --yellow-50: #fffaeb;
  --yellow-500: #f5a524;

  /* ── 쓰는 값: 바탕과 글자 ── */
  --bg: var(--gray-50);
  --surface: var(--gray-0);
  --surface-2: var(--gray-25);
  --surface-sunken: var(--gray-100);
  --line: var(--gray-100);
  --line-strong: var(--gray-200);
  --text: var(--gray-900);
  --text-2: var(--gray-600);
  --text-3: var(--gray-400);
  --text-on-ink: #ffffff;

  /* ── 쓰는 값: 동작 색 ── */
  --ink: var(--purple-500);          /* 주 버튼 = 로고 보라 */
  --ink-hover: var(--purple-600);
  --brand: var(--purple-500);
  --brand-hover: var(--purple-600);
  --brand-soft: var(--purple-50);
  --brand-text: var(--purple-700);
  --danger: var(--red-500);
  --danger-soft: var(--red-50);
  --danger-text: var(--red-700);
  --ok: var(--green-500);
  --ok-soft: var(--green-50);
  --warn: var(--yellow-500);
  --warn-soft: var(--yellow-50);
  --focus: var(--blue-500);

  /* ── 쓰는 값: 9단계 3구간 = 로고 막대 3개 (위가 넓고 진함) ── */
  --phase-gather: var(--purple-500);     /* 1~3 모으기 */
  --phase-gather-soft: #efe5ff;
  --phase-gather-text: #5200cc;
  --phase-persuade: var(--purple-400);   /* 4~6 설득 */
  --phase-persuade-soft: #f2ebff;
  --phase-persuade-text: #6a2ee0;
  --phase-keep: var(--purple-300);       /* 7~9 유지 */
  --phase-keep-soft: #f6f1ff;
  --phase-keep-text: #8456e6;

  /* ── 글자 ── */
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-num: "Pretendard Variable", Pretendard, -apple-system, sans-serif;
  --tracking: -0.3px;
  --tracking-tight: -0.6px;

  /* 크기 단계 (1028 사장 「폰트 너무 작아, 아정당 디자인 가이드로」): 아정당 본문 15~17, 섹션 제목 20~28, 큰 제목 40 */
  --fs-xs: 13px;
  --fs-sm: 14px;
  --fs-md: 16px;   /* 본문 기본 */
  --fs-lg: 17px;
  --fs-xl: 19px;   /* 카드 제목 */
  --fs-2xl: 22px;  /* 화면 제목(폰) */
  --fs-3xl: 28px;  /* 화면 제목(컴퓨터) */
  --fs-num: 28px;  /* 큰 숫자 하나 */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.3;
  --lh-normal: 1.55;

  /* ── 간격: 4 단위 ── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ── 모서리 ── */
  --r-sm: 8px;    /* 칩, 작은 버튼 */
  --r-md: 12px;   /* 입력칸, 버튼 (아정당 10~12) */
  --r-lg: 20px;   /* 카드 (아정당 20) */
  --r-xl: 24px;   /* 큰 카드, 폰 화면 */
  --r-pill: 999px;

  /* ── 그림자: 선 대신 쓴다 ── */
  /* 색 그림자 여러 겹(1028 배움): 검정 대신 브랜드 보라를 아주 옅게 섞고, 가까운 겹과 먼 겹을 겹친다 */
  /* 아정당처럼 카드는 거의 평평하게: 흰 카드가 회색 바탕 위에 놓이는 것만으로 나눈다 */
  --shadow-1: 0 1px 2px rgba(51, 0, 128, 0.03);
  --shadow-2: 0 0 0 1px rgba(51, 0, 128, 0.03), 0 2px 4px rgba(51, 0, 128, 0.05), 0 8px 20px rgba(51, 0, 128, 0.07);
  --shadow-3: 0 2px 6px rgba(51, 0, 128, 0.06), 0 12px 28px rgba(51, 0, 128, 0.10), 0 32px 64px rgba(51, 0, 128, 0.12);

  /* ── 움직임 ── */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 120ms;
  --dur: 200ms;

  /* ── 틀 ── */
  --sidebar-w: 240px;
  --content-max: 1080px;
  --tabbar-h: 64px;

  color-scheme: light;
}

/* 어두운 화면: 「쓰는 값」만 바꾼다 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1114;
    --surface: #181b20;
    --surface-2: #1d2026;
    --surface-sunken: #121418;
    --line: #262a31;
    --line-strong: #323741;
    --text: #f1f3f5;
    --text-2: #a9b0bc;
    --text-3: #6f7785;
    --ink: #8a4fff;
    --ink-hover: #9d6bff;
    --brand: #8a4fff;
    --brand-soft: rgba(138, 79, 255, 0.16);
    --brand-text: #c4a6ff;
    --danger-soft: rgba(240, 68, 56, 0.14);
    --danger-text: #ff8a80;
    --ok-soft: rgba(23, 178, 106, 0.14);
    --warn-soft: rgba(245, 165, 36, 0.14);
    --phase-gather-soft: rgba(102, 0, 255, 0.22);
    --phase-gather-text: #b48cff;
    --phase-persuade-soft: rgba(138, 79, 255, 0.18);
    --phase-persuade-text: #c4a6ff;
    --phase-keep-soft: rgba(187, 153, 255, 0.16);
    --phase-keep-text: #d9c7ff;
    /* 같은 굵기도 어두운 바탕에서 더 두꺼워 보여 한 단계 낮춘다(1028 배움) */
    --fw-medium: 460; --fw-semibold: 560; --fw-bold: 660;
    --shadow-1: 0 0 0 1px rgba(255, 255, 255, 0.04);
    --shadow-2: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 8px 24px rgba(0, 0, 0, 0.3);
    --shadow-3: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 20px 48px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f1114;
  --surface: #181b20;
  --surface-2: #1d2026;
  --surface-sunken: #121418;
  --line: #262a31;
  --line-strong: #323741;
  --text: #f1f3f5;
  --text-2: #a9b0bc;
  --text-3: #6f7785;
  --ink: #8a4fff;
  --ink-hover: #9d6bff;
  --brand: #8a4fff;
  --brand-soft: rgba(138, 79, 255, 0.16);
  --brand-text: #c4a6ff;
  --danger-soft: rgba(240, 68, 56, 0.14);
  --danger-text: #ff8a80;
  --ok-soft: rgba(23, 178, 106, 0.14);
  --warn-soft: rgba(245, 165, 36, 0.14);
  --phase-gather-soft: rgba(102, 0, 255, 0.22);
  --phase-gather-text: #b48cff;
  --phase-persuade-soft: rgba(138, 79, 255, 0.18);
  --phase-persuade-text: #c4a6ff;
  --phase-keep-soft: rgba(187, 153, 255, 0.16);
  --phase-keep-text: #d9c7ff;
  --shadow-1: 0 0 0 1px rgba(255, 255, 255, 0.04);
  --shadow-2: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 8px 24px rgba(0, 0, 0, 0.3);
  --shadow-3: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 20px 48px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

/* 단계 색 OKLCH(1028 배움 「밝기가 일정한 색」): 막대(로고)는 원래 세 단계 밝기를 지키고,
   글자와 옅은 바탕은 세 단계가 같은 밝기, 다른 색상(보라 285, 자주 302, 회보라 296. 1028 사장 「메인 색은 보라만」으로 파랑 계열을 뺌)으로 맞춰 어느 칩이든 똑같이 읽히게 한다 */
@supports (color: oklch(50% 0.2 285)) {
  :root {
    --phase-gather-soft: oklch(95.5% 0.03 285); --phase-gather-text: oklch(46% 0.24 285);
    --phase-persuade-soft: oklch(95.5% 0.03 302); --phase-persuade-text: oklch(46% 0.2 302);
    --phase-keep-soft: oklch(95.5% 0.03 296); --phase-keep-text: oklch(46% 0.12 296);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --phase-gather-soft: oklch(32% 0.09 285); --phase-gather-text: oklch(82% 0.11 285);
      --phase-persuade-soft: oklch(32% 0.09 302); --phase-persuade-text: oklch(82% 0.1 302);
      --phase-keep-soft: oklch(32% 0.06 296); --phase-keep-text: oklch(82% 0.06 296);
    }
  }
  :root[data-theme="dark"] {
    --phase-gather-soft: oklch(32% 0.09 285); --phase-gather-text: oklch(82% 0.11 285);
    --phase-persuade-soft: oklch(32% 0.09 302); --phase-persuade-text: oklch(82% 0.1 302);
    --phase-keep-soft: oklch(32% 0.06 296); --phase-keep-text: oklch(82% 0.06 296);
  }
}