/* ============================================================
   LANDING DESK — Design Tokens
   컬러 · 타이포 · 스페이싱 · 라운드 · 섀도 · 레이아웃 변수
   페이지 CSS는 이 변수만 사용한다. raw hex 직접 사용 금지.
   ============================================================ */
:root {
  /* ===== Primary (Rose / Magenta) ===== */
  --color-primary: #E6336A;
  --color-primary-strong: #C81E58;
  --color-primary-soft: #FCE4EC;
  --color-primary-tint: #FDF2F6;
  --color-primary-grad: linear-gradient(135deg, #F0507F 0%, #E6336A 100%);

  /* ===== Top searchbar signature gradient ===== */
  --gradient-top: linear-gradient(90deg, #FBD9C0 0%, #F7C6D9 42%, #D7DCF0 72%, #C8E6E2 100%);

  /* ===== Neutral ===== */
  --color-white: #FFFFFF;
  --bg-app: #F6F7F9;
  --bg-card: #FFFFFF;
  --bg-muted: #F1F3F6;
  --bg-input: #F7F8FA;
  --border: #ECEEF2;
  --border-strong: #DDE1E8;
  --text-strong: #2C2E39;
  --text-body: #4A4D5A;
  --text-muted: #9AA0AC;
  --text-faint: #C4C8D0;

  /* ===== Status ===== */
  --success: #2EBD85;  --success-soft: #E6F7F0;
  --warning: #F6A609;  --warning-soft: #FEF3E0;
  --danger:  #EF4F56;  --danger-soft:  #FDECEC;
  --info:    #4B8DF8;  --info-soft:    #EAF1FE;

  /* ===== Avatar alt gradients (이니셜 원형 대체 톤) ===== */
  --avatar-1: linear-gradient(135deg, #6FB1FC, #4B8DF8);
  --avatar-2: linear-gradient(135deg, #8FD3C0, #2EBD85);
  --avatar-3: linear-gradient(135deg, #C8A3E6, #8A4BB0);

  /* ===== SERP preview (구글 검색 결과 색) ===== */
  --serp-title: #1A4AD6;
  --serp-url-tone: #1A7F37;

  /* ===== Pastel chips/badges ===== */
  --chip-pink:#FCE2EC;   --chip-pink-ink:#C2356A;
  --chip-green:#E2F4E6;  --chip-green-ink:#2E8B57;
  --chip-blue:#E4EEFD;   --chip-blue-ink:#3A6FC4;
  --chip-purple:#F0E6F8; --chip-purple-ink:#8A4BB0;
  --chip-orange:#FDEEDD; --chip-orange-ink:#C77A1E;
  --chip-teal:#DEF3F1;   --chip-teal-ink:#2E8C84;

  /* ===== Typography ===== */
  --font-base: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-mono: "JetBrains Mono", "D2Coding", ui-monospace, "Courier New", monospace;
  --fs-display: 28px;
  --fs-h1: 22px;
  --fs-h2: 18px;
  --fs-h3: 15px;
  --fs-body: 14px;
  --fs-sm: 13px;
  --fs-xs: 12px;
  --lh-tight: 1.3;
  --lh-base: 1.55;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ===== Spacing (4px scale) ===== */
  --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;

  /* ===== Radius ===== */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-pill:999px;

  /* ===== Shadow (soft) ===== */
  --shadow-sm: 0 1px 2px rgba(20,23,40,.04);
  --shadow-md: 0 4px 16px rgba(20,23,40,.06);
  --shadow-lg: 0 8px 28px rgba(20,23,40,.08);

  /* ===== Layout ===== */
  --sidebar-w: 248px;
  --topbar-h: 76px;
  --content-pad: 28px;
  --content-max: 1280px;

  /* ===== Motion (쫀득한 스프링 모션) ===== */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);   /* 살짝 오버슈트하는 탄성 */
  --ease-out:    cubic-bezier(.22, 1, .36, 1);       /* 부드럽게 감속 */
  --dur-fast: .14s;
  --dur:      .24s;
  --dur-slow: .42s;

  /* 테마 전환 시 색 트랜지션 */
  --theme-transition: background-color var(--dur) var(--ease-out),
                      color var(--dur) var(--ease-out),
                      border-color var(--dur) var(--ease-out);
}

/* ============================================================
   DARK THEME — 라이트 모드 토글 OFF 시 적용 (html[data-theme="dark"])
   구조 토큰(배경·텍스트·보더·소프트·칩·섀도)만 재정의해
   기존 컴포넌트를 그대로 다크로 전환. 새 컴포넌트 없음.
   ============================================================ */
html[data-theme="dark"] {
  --bg-app: #14151B;
  --bg-card: #1D1F27;
  --bg-muted: #272A35;
  --bg-input: #23252F;
  --border: #2F323E;
  --border-strong: #3C404E;
  --text-strong: #EDEFF4;
  --text-body: #C4C8D2;
  --text-muted: #8B90A1;
  --text-faint: #5B5F70;

  --color-primary-soft: rgba(240, 80, 127, .22);
  --color-primary-tint: rgba(240, 80, 127, .10);

  --success-soft: rgba(46, 189, 133, .16);
  --warning-soft: rgba(246, 166, 9, .16);
  --danger-soft:  rgba(239, 79, 86, .16);
  --info-soft:    rgba(75, 141, 248, .16);

  --chip-pink:#3A2230;   --chip-pink-ink:#F6A9C4;
  --chip-green:#1E3329;  --chip-green-ink:#84D3A6;
  --chip-blue:#1F2D45;   --chip-blue-ink:#9CC0F5;
  --chip-purple:#2E2440; --chip-purple-ink:#CBA6E6;
  --chip-orange:#3A2E1E; --chip-orange-ink:#E8C089;
  --chip-teal:#1E332F;   --chip-teal-ink:#86CFC8;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, .45);
  --shadow-lg: 0 8px 28px rgba(0, 0, 0, .55);
}