/* === Limery Design Tokens — Lime + Deep Teal, Futuristic === */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Pretendard+Variable:wght@400;500;600;700;800&display=swap');

:root {
  /* ---- 라임 코어 팔레트 (symbol/logo 와 동기화) -------------------- */
  --lime-50:  #f4fde0;
  --lime-100: #e6fbb6;
  --lime-200: #d2f57a;
  --lime-300: #b8e84a;
  --lime-400: #a3d92e;
  --lime-500: #88c714;   /* 메인 라임 (logo의 점) */
  --lime-600: #6ba80c;
  --lime-700: #4f8005;
  --lime-800: #345403;

  --teal-900: #0e2c2b;   /* logo 글자색 (Live your memory) */
  --teal-800: #103e3a;
  --teal-700: #155b54;
  --teal-100: #c4e2dd;

  --cream-50:  #fdfdf7;  /* lime의 미색 (속살) */
  --cream-100: #f9f8e7;
  --cream-200: #f1efc6;

  /* ---- 시그니처 그라데이션 ----------------------------------------- */
  --grad-lime:    linear-gradient(135deg, var(--lime-300) 0%, var(--lime-500) 50%, var(--lime-600) 100%);
  --grad-lime-soft: linear-gradient(135deg, var(--lime-100) 0%, var(--lime-300) 100%);
  --grad-teal:    linear-gradient(135deg, var(--teal-700) 0%, var(--teal-900) 100%);
  /* 배경/카드에 쓰이는 부드러운 그라데이션 — 흰색 우세, 라임 힌트만 얇게 */
  --grad-fresh:   linear-gradient(135deg, #ffffff 0%, #fbfde9 55%, #f4fbdc 100%);
  /* 배경 메시: 흰 바탕 위에 매우 옅은 라임/크림 얼룩 (가독성 우선) */
  --grad-mesh:    radial-gradient(60% 80% at 0% 0%,   rgba(184,232,74,0.08) 0%, transparent 55%),
                  radial-gradient(70% 60% at 100% 0%, rgba(249,248,231,0.60) 0%, transparent 55%),
                  radial-gradient(80% 80% at 50% 100%, rgba(244,253,224,0.55) 0%, transparent 60%);
  --grad-dark-mesh: radial-gradient(60% 80% at 0% 0%, rgba(136,199,20,0.16) 0%, transparent 60%),
                    radial-gradient(80% 80% at 100% 100%, rgba(21,91,84,0.20) 0%, transparent 60%);

  /* ---- 시맨틱 컬러 (light) ---------------------------------------- */
  --c-bg:        #ffffff;     /* 본문 바탕은 순백 — 메시가 옅게 덧입혀짐 */
  --c-bg-mesh:   var(--grad-mesh);
  --c-surface:   #ffffff;
  --c-surface-2: #f7f7f2;   /* 부드러운 오프-화이트 — 카드 배경/호버 */
  --c-surface-3: #fafbee;   /* 아주 옅은 크림+라임 — 액센트 힌트 */
  --c-line:      #eceee2;
  --c-line-soft: #f2f4ea;
  --c-text:      var(--teal-900);
  --c-text-soft: #4a5d56;
  --c-text-mute: #8b9a8e;

  --c-primary:        var(--lime-500);
  --c-primary-strong: var(--lime-600);
  --c-primary-soft:   rgba(136,199,20,0.12);
  --c-primary-hover:  var(--lime-600);
  --c-on-primary:     #ffffff;
  --c-accent:         var(--teal-700);
  --c-accent-soft:    rgba(21,91,84,0.10);
  --c-good: var(--lime-500);
  --c-bad:  #e25555;
  --c-warn: #e7a823;
  --c-cool: #3b82f6;
  --c-warm: #ec4899;

  /* sidebar (light cream) */
  --c-sidebar:        rgba(255,255,255,0.72);
  --c-sidebar-text:   var(--teal-900);
  --c-sidebar-mute:   #6b7c70;
  --c-sidebar-hover:  rgba(136,199,20,0.10);
  --c-sidebar-active: rgba(136,199,20,0.18);
  --c-sidebar-line:   var(--c-line-soft);

  /* per-person */
  --c-young: #2563eb;
  --c-yuri:  #ec4c97;
  --c-seo:   var(--lime-600);
  --c-minki: #a78bfa;
  --c-family: var(--teal-700);

  /* ---- 카테고리 컬러 (계약·캐비닛 시스템) ------------------------ */
  --cat-real_estate: #f59e0b;
  --cat-finance:     #6366f1;
  --cat-insurance:   #14b8a6;
  --cat-employment:  #8b5cf6;
  --cat-health:      #ef4444;
  --cat-family:      #ec4899;
  --cat-document:    #475569;

  /* spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* radius */
  --r-1: 6px;
  --r-2: 10px;
  --r-3: 14px;
  --r-4: 20px;
  --r-pill: 999px;

  /* type */
  --f-sans: 'Pretendard Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Pretendard', 'Segoe UI', sans-serif;
  --f-num:  'Inter', 'SF Mono', 'Monaco', 'Roboto Mono', monospace;
  --t-2xs: 10px;
  --t-xs:  11px;
  --t-sm:  13px;
  --t-md:  14px;
  --t-lg:  17px;
  --t-xl:  21px;
  --t-2xl: 26px;
  --t-3xl: 34px;

  /* shadow — soft, layered */
  --sh-1: 0 1px 2px rgba(20,40,30,.05);
  --sh-2: 0 4px 14px rgba(20,40,30,.07);
  --sh-3: 0 12px 32px rgba(20,40,30,.10);
  --sh-glow: 0 0 0 4px rgba(136,199,20,0.18);

  /* layout */
  --nav-w: 240px;
  --nav-w-collapsed: 56px;
  --top-h: 52px;

  --t-scale: 1;
}

html { font-size: calc(16px * var(--t-scale)); }
.app { font-size: var(--t-md); }

/* ============================================================ */
/* DARK MODE — 깊은 틸 + 라임 액센트                              */
/* ============================================================ */
[data-theme="dark"] {
  --c-bg:        #0a1816;
  --c-bg-mesh:   var(--grad-dark-mesh);
  --c-surface:   #112322;
  --c-surface-2: #16302d;
  --c-surface-3: #0e2625;
  --c-line:      #1e3936;
  --c-line-soft: #18302d;
  --c-text:      #e8efe8;
  --c-text-soft: #a9b8b1;
  --c-text-mute: #6e807a;

  --c-primary:        var(--lime-400);
  --c-primary-strong: var(--lime-500);
  --c-primary-soft:   rgba(163,217,46,0.15);
  --c-primary-hover:  var(--lime-300);
  --c-on-primary:     #0a1816;
  --c-accent:         var(--lime-300);
  --c-accent-soft:    rgba(163,217,46,0.10);

  --c-sidebar:        rgba(14,38,37,0.85);
  --c-sidebar-text:   #e8efe8;
  --c-sidebar-mute:   #8ea098;
  --c-sidebar-hover:  rgba(163,217,46,0.08);
  --c-sidebar-active: rgba(163,217,46,0.16);
  --c-sidebar-line:   #1e3936;

  --c-seo: var(--lime-400);
  --c-family: var(--teal-100);

  --sh-1: 0 1px 2px rgba(0,0,0,.30);
  --sh-2: 0 4px 14px rgba(0,0,0,.40);
  --sh-3: 0 12px 32px rgba(0,0,0,.55);
  --sh-glow: 0 0 0 4px rgba(163,217,46,0.20);

  --grad-fresh: linear-gradient(135deg, var(--c-surface) 0%, var(--c-surface-2) 100%);
}

/* ============================================================ */
/* 유틸리티 — 그라데이션 텍스트 / 글래스 / 글로우                  */
/* ============================================================ */
.text-grad-lime {
  background: var(--grad-lime);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.glass {
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.6);
}
[data-theme="dark"] .glass {
  background: rgba(17,35,34,0.65);
  border-color: rgba(163,217,46,0.10);
}
.glow-lime { box-shadow: var(--sh-glow); }