/* Revix 디자인 토큰 — 브랜드 그린 메인
 *
 * 브랜드 컬러 = CTA "무료로 시작하기" 그린(#10b981).
 * --accent 계열을 그린으로 정의 → --brand/--brand-primary/--donut/--kpi 등 연쇄 반영.
 * - 메인: #10b981 (그린)
 * - 베이스: #ffffff + #f3f5f8 (라이트 그레이-블루)
 * - 페일: #d1fae5 / #ecfdf5 / #a7f3d0
 * - 텍스트: #000 / #222 / #19154e (다크 네이비)
 * - 다크 섹션: #19154e (네이비)
 *
 * 기존 인라인 :root 알리아스(--brand, --bg, --text 등) 호환 유지.
 */

:root {
  /* ── 텍스트 (다크 → 라이트) ── */
  --ink-900: #000000;
  --ink-800: #19154e;    /* 다크 네이비 (cre.ma 헤드라인·다크섹션) */
  --ink-700: #222222;
  --ink-600: #3d4660;
  --ink-500: #5a6478;
  --ink-400: #8590a3;
  --ink-300: #b8c1d1;
  --ink-200: #ebeef4;
  --line: var(--ink-200);
  --ink-100: #f3f5f8;    /* cre.ma 베이스 그레이-블루 */
  --ink-50:  #f9f9f9;
  --paper:   #ffffff;

  /* ── 메인 브랜드 그린 (CTA #10b981) ── */
  --accent:        #10b981;
  --accent-hover:  #059669;
  --accent-active: #047857;
  --accent-light:  #34d399;
  --accent-pale:   #d1fae5;
  --accent-pale-2: #ecfdf5;
  --accent-pale-3: #a7f3d0;

  /* ── 보조 ── */
  --cyan:      #146875;    /* cre.ma 보조 시안 */
  --cyan-pale: #e6f1f3;

  /* ── 의미색 ── */
  --pos:      #16a34a;
  --pos-soft: #ecfdf5;
  --neg:      #dc2626;
  --neg-soft: #fef2f2;
  --mix:      #d97706;
  --mix-soft: #fffbeb;
  --neu:      #8590a3;
  --neu-soft: #f3f5f8;

  /* ── 배경 surface 시스템 ── */
  --bg-page:    #f3f5f8;   /* cre.ma 메인 베이스 */
  --bg-surface: #ffffff;
  --bg-elev:    #f9f9f9;
  --bg-tint:    var(--accent-pale);
  --bg-tint-2:  var(--accent-pale-2);
  --bg-tint-3:  var(--accent-pale-3);

  /* ── 다크 섹션 (브랜드 민트 하모니 — 딥 포레스트/틸) ── */
  --dark-bg:       #0c1f1a;
  --dark-surface:  #11302a;
  --dark-elev:     #16413a;
  --dark-border:   #224f46;
  --dark-text:     #ffffff;
  --dark-text-mut: #a8c3bb;

  /* ── 그라데이션 ── */
  --grad-hero:   radial-gradient(circle at 20% 0%, rgba(16,185,129,0.08) 0%, transparent 50%);
  --grad-dark:   linear-gradient(180deg, #0c1f1a 0%, #11302a 100%);
  --grad-accent: linear-gradient(135deg, #10b981 0%, #059669 100%);
  --grad-paper:  linear-gradient(180deg, #ffffff 0%, #f9f9f9 100%);

  /* ── shape & 그림자 ── */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-2xl:  28px;
  --r-pill: 100px;
  --shadow-1: 0 1px 2px rgba(25,21,78,0.04), 0 1px 3px rgba(25,21,78,0.06);
  --shadow-2: 0 4px 12px rgba(25,21,78,0.08);
  --shadow-3: 0 12px 28px rgba(25,21,78,0.10);
  --shadow-cta:       0 8px 16px rgba(16, 185, 129, 0.24);
  --shadow-cta-naver: 0 8px 16px rgba(3, 199, 90, 0.20);

  /* ── 타이포 위계 ── */
  --fs-mega:    80px;    /* 신규: cre.ma급 히어로 디스플레이 */
  --fs-display: 64px;
  --fs-h1:      40px;
  --fs-h2:      28px;
  --fs-h3:      20px;
  --fs-body:    15px;
  --fs-cap:     13px;
  --fs-eyebrow: 12px;
  --fs-kpi:     40px;
  --fs-kpi-sm:  28px;
  --lh-tight:   1.1;
  --lh-body:    1.6;
  --ls-tight:   -0.025em;
  --ls-display: -0.04em;

  /* ── 모션 ── */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    150ms;
  --dur-base:    240ms;
  --dur-slow:    400ms;

  /* ── 레이어 ── */
  --z-nav:     50;
  --z-sticky:  60;
  --z-overlay: 900;
  --z-modal:   1000;
  --z-toast:   1100;

  /* ── 컨테이너 ── */
  --container:        1200px;
  --container-narrow: 880px;
  --container-wide:   1440px;

  /* ── 8px spacing scale ── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  28px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* ── 기존 변수 알리아스 (호환층) ──
   * index.html / login.html 등 인라인 :root보다 나중에 로드되어 우선순위 승.
   * --brand 블루로 시프트.
   */
  --brand:        var(--accent);
  --brand-hover:  var(--accent-hover);
  --brand-tint:   var(--accent-pale);
  --brand-pale:   var(--accent-pale);
  --naver:        #03c75a;          /* 네이버 셀러센터 식별색 유지 */
  --naver-hover:  #02a84a;
  --bg:           var(--bg-page);
  --bg-alt:       var(--ink-200);
  --surface:      var(--paper);
  --text:         var(--ink-800);
  --text-muted:   var(--ink-500);
  --text-sub:     var(--ink-400);
  --border:       var(--ink-200);
  --border-strong:var(--ink-300);
  --danger:       var(--neg);
  --warn:         #f59e0b;

  /* ── 멀티컬러 KPI 카드 토큰 (블루 기조로 시프트) ── */
  --kpi-green:       #22c55e;
  --kpi-green-hover: #16a34a;
  --kpi-blue:        var(--accent);
  --kpi-blue-hover:  var(--accent-hover);
  --kpi-purple:      #8b5cf6;
  --kpi-purple-hover:#7c3aed;
  --kpi-dark:        var(--ink-800);
  --kpi-dark-hover:  #0f0c38;

  /* 보라 브랜드 → 블루로 통합 (cre.ma 톤 수렴) */
  --brand-primary:        var(--accent);
  --brand-primary-hover:  var(--accent-hover);
  --brand-primary-soft:   var(--accent-pale);

  /* 페이지 배경 (옅은 블루) */
  --bg-page-soft:    var(--accent-pale-2);
  --bg-page-tint:    var(--accent-pale);

  /* 도넛/차트 색 (블루 기조) */
  --donut-pos: #16a34a;
  --donut-neg: #dc2626;
  --donut-neu: #d1d5db;
  --donut-pos-soft: rgba(22,163,74,0.12);
  --donut-neg-soft: rgba(220,38,38,0.12);
  --donut-accent:   var(--accent);
}

/* =========================================================
   마케팅 사이트(public) 브랜드 컬러 = 파랑 (Review-source).
   :root(민트)는 앱/대시보드용으로 유지. 여기서 --accent 계열만
   덮어 nav·hero·랜딩·푸터 등 공개 페이지 전체를 파랑으로 통일.
   ========================================================= */
body.public {
  --accent:        oklch(0.58 0.22 260);
  --accent-hover:  oklch(0.52 0.22 260);
  --accent-active: oklch(0.46 0.20 260);
  --accent-light:  oklch(0.72 0.15 255);
  --accent-pale:   oklch(0.965 0.025 255);
  --accent-pale-2: oklch(0.985 0.012 255);
  --accent-pale-3: oklch(0.92 0.05 255);
  --grad-accent: linear-gradient(135deg, oklch(0.58 0.22 260) 0%, oklch(0.50 0.20 260) 100%);
}