/* ==========================================================================
   tokens.css — 디자인 시스템의 유일한 원천
   ==========================================================================

   ★ 규칙
   1) 이 파일에는 CSS 변수 선언만 존재한다. 셀렉터 규칙을 쓰지 않는다.
   2) 다른 CSS 파일에서 리터럴 색상(#fff)·리터럴 크기(16px)를 쓰지 않는다.
      전부 여기의 변수를 참조한다.
   3) 값을 바꾸고 싶으면 여기만 고친다 → 사이트 전체가 일관되게 변한다.

   전임 프로젝트에서 색상값이 27개 파일에 흩어져 "파란색을 바꾸려면
   몇 군데를 고쳐야 하는지" 아무도 몰랐던 문제를 구조적으로 막는다.
   ========================================================================== */

:root {

	/* ── 1. 원시 색상 팔레트 (Raw) ──────────────────────
	   여기의 색을 템플릿에서 직접 쓰지 않는다.
	   아래 "의미 색상"을 통해서만 사용한다. */

	--rl-gray-0:   #ffffff;
	--rl-gray-25:  #fbfbfa;
	--rl-gray-50:  #f7f7f5;
	--rl-gray-100: #f1f1ef;
	--rl-gray-150: #ebebe8;
	--rl-gray-200: #e6e6e3;
	--rl-gray-300: #d3d3ce;
	--rl-gray-400: #b0b0a9;
	--rl-gray-500: #8b8f94;
	--rl-gray-600: #6b7076;
	--rl-gray-700: #4d5257;
	--rl-gray-800: #33373b;
	--rl-gray-900: #1f2225;
	--rl-gray-950: #141618;

	--rl-blue-50:  #eff6ff;
	--rl-blue-100: #dbeafe;
	--rl-blue-200: #bfdbfe;
	--rl-blue-500: #2563eb;
	--rl-blue-600: #1d4ed8;
	--rl-blue-700: #1e40af;
	--rl-blue-900: #172554;

	--rl-green-50:  #f0fdf4;
	--rl-green-100: #dcfce7;
	--rl-green-500: #16a34a;
	--rl-green-700: #15803d;

	--rl-amber-50:  #fffbeb;
	--rl-amber-100: #fef3c7;
	--rl-amber-500: #f59e0b;
	--rl-amber-700: #b45309;

	--rl-red-50:  #fef2f2;
	--rl-red-100: #fee2e2;
	--rl-red-500: #ef4444;
	--rl-red-700: #b91c1c;

	--rl-violet-50:  #f5f3ff;
	--rl-violet-100: #ede9fe;
	--rl-violet-700: #6d28d9;


	/* ── 1-b. 카드 테마 팔레트 (Notion 계열) ────────────
	   Notion 최신 홈은 벤토 카드마다 색 테마를 부여한다
	   (yellow_palette_theme, red_palette_theme …).
	   회색 상자를 나열하는 대신 색으로 리듬을 만드는 방식이라,
	   항목이 많은 그리드(전국 17개 시·도)에서 특히 효과가 크다.

	   각 색은 3단이다:
	     tint — 카드 배경 (아주 옅게)
	     base — 점·아이콘·강조
	     deep — 카드 위 텍스트 (배경과 대비 확보) */

	--rl-hue-blue-tint:   #e8f2fd;
	--rl-hue-blue-base:   #097fe8;
	--rl-hue-blue-deep:   #0a5590;

	--rl-hue-green-tint:  #e9f7ec;
	--rl-hue-green-base:  #1aae39;
	--rl-hue-green-deep:  #146b28;

	--rl-hue-amber-tint:  #fff5e0;
	--rl-hue-amber-base:  #ffb110;
	--rl-hue-amber-deep:  #8a5b00;

	--rl-hue-orange-tint: #fff0e6;
	--rl-hue-orange-base: #ff8a33;
	--rl-hue-orange-deep: #9c4a0e;

	--rl-hue-red-tint:    #feeceb;
	--rl-hue-red-base:    #f64932;
	--rl-hue-red-deep:    #a52a19;

	--rl-hue-pink-tint:   #ffeef8;
	--rl-hue-pink-base:   #ff83dd;
	--rl-hue-pink-deep:   #a3327f;

	--rl-hue-purple-tint: #f3ecfd;
	--rl-hue-purple-base: #ad6ded;
	--rl-hue-purple-deep: #6b34a8;

	--rl-hue-teal-tint:   #e6f5f4;
	--rl-hue-teal-base:   #2a9d99;
	--rl-hue-teal-deep:   #175c5a;


	/* ── 2. 의미 색상 (Semantic) ─────────────────────── */

	--rl-bg:            var(--rl-gray-0);
	--rl-bg-subtle:     var(--rl-gray-25);
	--rl-surface:       var(--rl-gray-50);
	--rl-surface-2:     var(--rl-gray-100);
	--rl-surface-hover: var(--rl-gray-150);
	--rl-inverse:       var(--rl-gray-900);

	--rl-text:        var(--rl-gray-900);
	--rl-text-strong: var(--rl-gray-950);
	--rl-text-muted:  var(--rl-gray-600);
	--rl-text-subtle: var(--rl-gray-500);
	--rl-text-on-dark:var(--rl-gray-0);

	--rl-border:        var(--rl-gray-200);
	--rl-border-strong: var(--rl-gray-300);
	--rl-border-subtle: var(--rl-gray-150);

	/* 액센트는 Notion 계열 블루(#097fe8)를 쓴다.
	   기존 #2563eb 는 부트스트랩 기본값과 같아 "기본 테마" 인상을 준다. */
	--rl-accent:        var(--rl-hue-blue-base);
	--rl-accent-hover:  var(--rl-hue-blue-deep);
	--rl-accent-strong: var(--rl-hue-blue-deep);
	--rl-accent-soft:   #cde5fb;
	--rl-accent-faint:  var(--rl-hue-blue-tint);

	--rl-link:       var(--rl-hue-blue-base);
	--rl-link-hover: var(--rl-hue-blue-deep);

	--rl-focus-ring: var(--rl-hue-blue-base);

	/* 카드가 올라앉는 기본 테마값 — .rl-theme-* 가 이 세 개를 덮어쓴다.
	   덮어쓰지 않은 카드는 중립 회색으로 떨어진다. */
	--rl-c-tint: var(--rl-surface);
	--rl-c-base: var(--rl-text-subtle);
	--rl-c-deep: var(--rl-text-strong);


	/* ── 3. 분양 상태 색상 ──────────────────────────────
	   presale_status 택소노미의 slug 와 1:1 대응한다.
	   상태별로 색이 다르면 목록에서 훑어보기가 훨씬 빠르다. */

	--rl-status-upcoming-bg:   var(--rl-violet-100);
	--rl-status-upcoming-fg:   var(--rl-violet-700);
	--rl-status-accepting-bg:  var(--rl-blue-100);
	--rl-status-accepting-fg:  var(--rl-blue-700);
	--rl-status-selling-bg:    var(--rl-green-100);
	--rl-status-selling-fg:    var(--rl-green-700);
	--rl-status-pickup-bg:     var(--rl-amber-100);
	--rl-status-pickup-fg:     var(--rl-amber-700);
	--rl-status-closed-bg:     var(--rl-gray-150);
	--rl-status-closed-fg:     var(--rl-gray-600);


	/* ── 4. 타이포그래피 ───────────────────────────────── */

	--rl-font-sans: "Pretendard Variable", Pretendard, -apple-system,
		BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
	--rl-font-serif: "Nanum Myeongjo", Georgia, "Times New Roman", serif;
	--rl-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	/* 크기 — clamp 로 화면 폭에 따라 매끄럽게 변한다.
	   모바일에서 별도 미디어쿼리로 폰트를 다시 지정할 필요가 없어진다. */
	--rl-text-xs:   0.75rem;    /* 12px — 캡션, 배지 */
	--rl-text-sm:   0.8125rem;  /* 13px — 메타 정보 */
	--rl-text-base: 0.9375rem;  /* 15px — 카드 본문 */
	--rl-text-md:   1rem;       /* 16px — 기본 본문 */
	--rl-text-lg:   1.125rem;   /* 18px — 리드문 */
	--rl-text-xl:   clamp(1.25rem, 1.15rem + 0.4vw, 1.375rem);
	--rl-text-2xl:  clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
	--rl-text-3xl:  clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
	--rl-text-4xl:  clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
	--rl-text-hero: clamp(2.25rem, 1.5rem + 3.4vw, 4rem);

	--rl-weight-regular:  400;
	--rl-weight-medium:   500;
	--rl-weight-semibold: 600;
	--rl-weight-bold:     700;

	--rl-lh-tight:   1.2;
	--rl-lh-snug:    1.4;
	--rl-lh-normal:  1.6;
	--rl-lh-relaxed: 1.75;

	/* 한글은 자간을 살짝 좁히면 훨씬 정돈돼 보인다. */
	--rl-ls-tight:  -0.02em;
	--rl-ls-normal: -0.011em;
	--rl-ls-wide:   0.02em;


	/* ── 5. 간격 ────────────────────────────────────── */

	--rl-space-1:  0.25rem;
	--rl-space-2:  0.5rem;
	--rl-space-3:  0.75rem;
	--rl-space-4:  1rem;
	--rl-space-5:  1.25rem;
	--rl-space-6:  1.5rem;
	--rl-space-8:  2rem;
	--rl-space-10: 2.5rem;
	--rl-space-12: 3rem;
	--rl-space-16: 4rem;
	--rl-space-20: 5rem;


	/* ── 6. 레이아웃 ────────────────────────────────── */

	--rl-container:  1280px;
	--rl-content:    1080px;
	--rl-prose:      720px;
	--rl-gutter:     clamp(1rem, 2vw, 1.75rem);
	--rl-section-y:  clamp(3rem, 5vw, 6rem);
	--rl-header-h:   64px;


	/* ── 7. 모서리·그림자 ──────────────────────────── */

	/* Notion 최신 홈은 카드 모서리를 크게 굴린다(16~24px).
	   작은 라운드는 "관리자 화면" 느낌을 주고, 큰 라운드는 부드럽고 완성돼 보인다. */
	--rl-radius-sm: 6px;
	--rl-radius:    10px;
	--rl-radius-md: 14px;
	--rl-radius-lg: 18px;
	--rl-radius-xl: 24px;
	--rl-radius-card: 20px;
	--rl-radius-round: 999px;

	--rl-shadow-xs: 0 1px 2px rgba(15, 18, 20, 0.04);
	--rl-shadow-sm: 0 1px 3px rgba(15, 18, 20, 0.06), 0 1px 2px rgba(15, 18, 20, 0.04);
	--rl-shadow:    0 4px 12px rgba(15, 18, 20, 0.07), 0 1px 3px rgba(15, 18, 20, 0.05);
	--rl-shadow-lg: 0 12px 32px rgba(15, 18, 20, 0.1), 0 2px 8px rgba(15, 18, 20, 0.05);
	--rl-shadow-header: 0 1px 0 var(--rl-border), 0 2px 12px rgba(15, 18, 20, 0.04);


	/* ── 8. 모션 ────────────────────────────────────── */

	--rl-duration-fast: 120ms;
	--rl-duration:      180ms;
	--rl-duration-slow: 280ms;
	--rl-ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
	--rl-ease-out:  cubic-bezier(0.16, 1, 0.3, 1);


	/* ── 9. z-index 층위 ────────────────────────────── */

	--rl-z-dropdown: 40;
	--rl-z-header:   50;
	--rl-z-mobile:   60;
	--rl-z-fcta:     45;
}


/* ── 다크 모드 ───────────────────────────────────────
   의미 색상만 뒤집으면 전체가 따라온다.
   원시 팔레트를 직접 참조하지 않는 이유가 바로 이것.

   ★ prefers-color-scheme 이 아니라 data-theme 속성으로 켠다.
     이 사이트의 기본값은 라이트다 — 참조한 Notion 홈이 라이트 전용이고,
     파스텔 색면(.rl-theme-*)이 라이트에서 제 색을 내기 때문이다.
     OS 가 다크라고 해서 자동으로 다크가 되지 않는다.
     사용자가 헤더 토글로 고르면 <html data-theme="dark"> 가 붙는다. */

:root[data-theme="dark"] {
	--rl-bg:            var(--rl-gray-950);
	--rl-bg-subtle:     #191c1f;
	--rl-surface:       #1e2124;
	--rl-surface-2:     #24282c;
	--rl-surface-hover: #2b3034;
	--rl-inverse:       var(--rl-gray-50);

	--rl-text:         #e8e9ea;
	--rl-text-strong:  #f7f8f8;
	--rl-text-muted:   #a2a7ac;
	--rl-text-subtle:  #85898e;
	--rl-text-on-dark: var(--rl-gray-950);

	--rl-border:        #33383d;
	--rl-border-strong: #454b51;
	--rl-border-subtle: #2a2f33;

	--rl-accent:        #4da3f5;
	--rl-accent-hover:  #7cbcf8;
	--rl-accent-strong: #7cbcf8;
	--rl-accent-soft:   #17334f;
	--rl-accent-faint:  #12263a;

	--rl-link:       #6fb4f7;
	--rl-link-hover: #a3d0fa;

	/* 카드 테마 — 다크에서는 tint 를 "어둡고 채도 낮은 면"으로,
	   deep 을 "밝은 글자색"으로 뒤집는다. 역할은 그대로다. */
	--rl-hue-blue-tint:   #12293f;
	--rl-hue-blue-deep:   #8fc4f8;
	--rl-hue-green-tint:  #14301f;
	--rl-hue-green-deep:  #86efac;
	--rl-hue-amber-tint:  #33280d;
	--rl-hue-amber-deep:  #fcd34d;
	--rl-hue-orange-tint: #35220f;
	--rl-hue-orange-deep: #fdba74;
	--rl-hue-red-tint:    #351915;
	--rl-hue-red-deep:    #fca5a5;
	--rl-hue-pink-tint:   #331a2b;
	--rl-hue-pink-deep:   #f9a8d4;
	--rl-hue-purple-tint: #261a3a;
	--rl-hue-purple-deep: #c4b5fd;
	--rl-hue-teal-tint:   #102e2d;
	--rl-hue-teal-deep:   #5eead4;

	--rl-status-upcoming-bg:  #2b2148;
	--rl-status-upcoming-fg:  #c4b5fd;
	--rl-status-accepting-bg: #1c2c4d;
	--rl-status-accepting-fg: #93c5fd;
	--rl-status-selling-bg:   #14301f;
	--rl-status-selling-fg:   #86efac;
	--rl-status-pickup-bg:    #3a2a10;
	--rl-status-pickup-fg:    #fcd34d;
	--rl-status-closed-bg:    #2a2f33;
	--rl-status-closed-fg:    #a2a7ac;

	--rl-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
	--rl-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
	--rl-shadow:    0 4px 14px rgba(0, 0, 0, 0.45);
	--rl-shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.55);
	--rl-shadow-header: 0 1px 0 var(--rl-border), 0 2px 12px rgba(0, 0, 0, 0.3);
}