/* SAERODI 통합 디자인 토큰 — saerodi-merged
 * ─────────────────────────────────────────────────────────────
 * saerodi-site(site/tokens.css)와 saerodi-portal(public/theme/tokens.css)이
 * 같은 변수명에 다른 값을 쓰던 것을 이 프로젝트에서 하나로 합친 결과물이다.
 * 병합 규칙(계획서 "디자인 토큰 통합" 절 참고):
 *   - 두 곳에 이름이 겹치는 키는 사이트(공개 브랜드) 값을 채택한다.
 *     예: --color-accent-text = 코럴(사이트 값).
 *   - 포털에만 있던 키(에러/성공 시맨틱, 추가 shadow, --font-mono 등)는
 *     충돌이 없어 그대로 가져왔다.
 * 원본은 절대 이 파일을 복붙해 덮어쓰지 않는다 — saerodi-site/site/tokens.css,
 * saerodi-portal/public/theme/tokens.css는 읽기 전용 참고 대상.
 *
 * ⚠️ 2026-08-28 갱신: --color-accent-text·--color-accent-soft는 실제
 * 로그인 후 포털 화면(app/workspace/GrowcorePortal.tsx)에서 보면 원래
 * 포털 색(네이비/코럴틴트)과 달라 보인다는 걸 사용자가 확인해서, 포털
 * 안(.portal-shell 스코프)에서만 원래 값으로 되돌렸다 — 이 파일의 값은
 * 그대로 두고 app/workspace/growcore.css의 .portal-shell 규칙에서
 * 덮어쓴다(공개 사이트·로그인/가입 화면은 계속 이 파일의 코럴 값을 씀).
 */
:root {
  /* ── 브랜드 원색 (portal 쪽 원시 hex 상수 — 그대로 이식) ───── */
  --brand-navy: #1e2a44;
  --brand-coral: #ff6a3d;
  --brand-teal: #2e7d8c;
  --brand-ivory: #faf7f2;
  --brand-pearl: #e8e6e1;
  --brand-ink-gray: #4a4a4a;

  /* ── 색 (충돌 키는 사이트 값 채택) ──────────────────────── */
  --color-paper:       oklch(97.3% 0.008 80);   /* 아이보리 배경 */
  --color-paper-2:     oklch(94.8% 0.012 80);   /* 한 단계 올라간 면 */
  --color-paper-3:     oklch(92% 0.015 80);     /* 두 단계 (태그·칩) */
  --color-surface:     #fffdf9;                 /* portal 전용 — 카드 표면 */
  --color-ink:         oklch(27% 0.055 262);    /* 잉크 네이비 — 본문·헤딩 */
  --color-ink-2:       oklch(38% 0.045 262);    /* 보조 텍스트 */
  --color-muted:       oklch(48% 0.03 262);     /* 흐린 텍스트 */
  --color-rule:        oklch(86% 0.015 80);     /* 구분선 */
  --color-rule-2:      oklch(90.5% 0.012 80);   /* 옅은 구분선 */
  --color-accent:      oklch(69% 0.19 35);      /* 새로디 코럴 */
  --color-accent-deep: oklch(62% 0.185 35);     /* 코럴 호버 · 큰 글자용 */
  --color-accent-text: oklch(50% 0.17 35);      /* ← 사이트 값 채택(코럴). 포털 옛 값(네이비)은 폐기 */
  --color-accent-soft: oklch(85% 0.1 75);       /* ← 사이트 값 채택(소프트 앰버). 포털 옛 값(코럴 11%)은 폐기 */
  --color-accent-ink:  oklch(97.3% 0.008 80);   /* 코럴(주황) 버튼 위 텍스트 = 아이보리 (브랜드 규칙) */
  --color-accent-shadow:        rgb(255 106 61 / 18%); /* portal 전용 */
  --color-accent-shadow-strong: rgb(255 106 61 / 24%); /* portal 전용 */
  --color-focus:       oklch(58% 0.2 35);       /* ← 사이트 값 채택(코럴 포커스 링). 포털 옛 값(네이비)은 폐기 */

  /* ── 시맨틱 색 (portal 전용 — 사이트엔 없어서 충돌 없음) ──── */
  --color-success:      var(--brand-navy);
  --color-teal-soft:    color-mix(in srgb, var(--brand-teal) 10%, var(--brand-ivory));
  --color-success-soft: var(--color-teal-soft);
  --color-error:        #b42318;
  --color-error-soft:   color-mix(in srgb, #b42318 10%, var(--brand-ivory));
  --color-scrim:        rgb(30 42 68 / 52%);
  --color-shadow:       rgb(30 42 68 / 9%);

  /* ── 딥씨(심해) 존 — 하단부 반전 (사이트 전용, 그대로 이식) ── */
  --color-deep:        oklch(21% 0.05 262);
  --color-deep-2:      oklch(26% 0.055 262);
  --color-teal:        oklch(58% 0.06 220);     /* 바다 청록 #2E7D8C — 물결·저채도 서브 */
  --color-on-deep:     color-mix(in oklch, var(--color-paper) 90%, var(--color-ink));
  --color-on-deep-2:   color-mix(in oklch, var(--color-paper) 72%, var(--color-ink));
  --color-on-deep-3:   color-mix(in oklch, var(--color-paper) 55%, var(--color-ink));
  --color-deep-rule:   color-mix(in oklch, var(--color-paper) 22%, transparent);

  /* ── 글꼴 ───────────────────────────────────── */
  /* 브랜드 지침: Pretendard 하나로 통일, 굵기 대비로 위계 (세리프 금지) */
  --font-display: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", sans-serif;
  --font-body:    "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", sans-serif;
  --font-mono:    var(--font-geist-mono), ui-monospace, monospace; /* portal 전용 */

  /* ── 타입 스케일 (1.25 장3도) ───────────────── */
  --text-xs:   0.8rem;                          /* portal 전용 */
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.25rem;
  --text-lg:   1.5625rem;
  --text-xl:   1.9531rem;
  --text-2xl:  2.4414rem;
  --text-display:   clamp(2.3rem, 4.2vw + 1rem, 4.5rem);
  --text-display-s: clamp(1.85rem, 2.8vw + 0.9rem, 3rem);

  /* ── 간격 (4pt) ─────────────────────────────── */
  --space-3xs: 0.125rem;                        /* portal 전용 */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;
  --space-section: clamp(5rem, 10vw, 8.5rem);

  /* ── 모서리·선 ──────────────────────────────── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;         /* portal 전용 */
  --radius-pill: 999px;
  --rule-hair: 1px;
  --shadow-pill: 0 8px 24px -14px oklch(27% 0.055 262 / 0.20);
  --shadow-soft: 0 0.75rem 2rem var(--color-shadow);   /* portal 전용 */
  --shadow-hero: 0 24px 48px -28px oklch(27% 0.055 262 / 0.28),
                 0 2px 8px -2px oklch(27% 0.055 262 / 0.07);   /* portal 전용 — 히어로 표면 */

  /* ── 글래스(진주 표면, 사이트 전용) ──────────── */
  --blur-glass: 10px;
  --color-glass-surface: color-mix(in oklch, var(--color-paper) 90%, transparent);
  --shadow-glass: 0 24px 48px -28px oklch(27% 0.055 262 / 0.28),
                  0 2px 8px -2px oklch(27% 0.055 262 / 0.07);

  /* ── 모션 ───────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  420ms;

  /* ── z 레벨 ─────────────────────────────────── */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 200;
  --z-modal: 400;            /* portal 전용 */
}