/* ==========================================================================
   TwigSNS 디자인 토큰 (SoT) — 2026-09-27 v1
   정본 문서: /design/TWIG_DESIGN.md  (규칙·사용법은 문서 참조)
   - 전 토큰 --tw- 접두어 (기존 --web-* / --w / --h 등과 충돌 방지)
   - :root 변수 정의만 담는다. 셀렉터 스타일 없음 → 로드만으로 기존 화면 영향 0
   - 브랜드 #23BF94 는 불변. 스케일은 OKLCH 색상각 168.4° 고정, 밝기만 이동
   - 다크 토큰은 정의만. 자동 전환(prefers-color-scheme) 미적용 — 화면 이관 후 활성화
   ========================================================================== */

:root {
	/* ---- 브랜드 민트 11단계 (흰 바탕 대비) ---- */
	--tw-mint-50: #e4fef3;
	--tw-mint-100: #ccfbe8;
	--tw-mint-200: #a1f2d3;
	--tw-mint-300: #71e4bc;
	--tw-mint-400: #3ad0a4;
	--tw-mint-500: #23bf94; /* 브랜드 메인 · 불변 */
	--tw-mint-600: #009e78; /* 3.41 · 눌림 상태 (#16a37b / #1a9e7a 대체) */
	--tw-mint-700: #077f60; /* 4.98 · 링크·민트색 텍스트 */
	--tw-mint-800: #04624a; /* 7.37 */
	--tw-mint-900: #004634; /* 10.91 */
	--tw-mint-950: #022c1f; /* 15.19 · 민트 바탕 위 글씨 (민트 대비 6.47) */

	/* ---- 뉴트럴 (민트 틴트) ---- */
	--tw-gray-0: #ffffff;
	--tw-gray-50: #f5fcf9;
	--tw-gray-100: #eff5f2;
	--tw-gray-200: #e3eae7;
	--tw-gray-300: #cfd6d3;
	--tw-gray-400: #a0a6a4; /* 비활성·placeholder 전용 (2.47 — 글씨 금지) */
	--tw-gray-500: #707673; /* 4.64 · 보조 글씨 (#999 대체) */
	--tw-gray-600: #4c5551; /* 7.70 · 2차 글씨 (#6e6e6e 대체) */
	--tw-gray-800: #2d3532;
	--tw-gray-900: #151c1a; /* 17.31 · 본문 글씨 */

	/* ---- 상태 색 (브랜드와 분리) ---- */
	--tw-danger: #d1383d;   /* 흰 글씨 4.83 */
	--tw-warning: #f5a524;  /* 짙은 글씨 전용 8.7 */
	--tw-info: #1f6fe0;     /* 흰 글씨 4.76 */
	--tw-like: #e0356f;     /* 좋아요 하트·카운트 아이콘용 4.28 */
	--tw-danger-soft: #fdecec;
	--tw-warning-soft: #fef4e2;
	--tw-info-soft: #e8f0fc;
	--tw-like-soft: #fdebf1;

	/* ---- 역할 토큰 (화면은 이것만 쓴다) ---- */
	--tw-bg: var(--tw-gray-50);
	--tw-surface: var(--tw-gray-0);
	--tw-surface-2: var(--tw-gray-100);
	--tw-line: var(--tw-gray-200);
	--tw-line-strong: var(--tw-gray-300);
	--tw-text: var(--tw-gray-900);
	--tw-text-2: var(--tw-gray-600);
	--tw-text-3: var(--tw-gray-500);
	--tw-text-disabled: var(--tw-gray-400);

	--tw-brand: var(--tw-mint-500);
	--tw-on-brand: var(--tw-mint-950);   /* 민트 버튼 글씨 — 흰색 금지(2.35 미달) */
	--tw-brand-pressed: var(--tw-mint-600);
	--tw-brand-soft: var(--tw-mint-50);  /* 선택 배경·배지 (rgba(35,191,148,x) 대체) */
	--tw-brand-soft-2: var(--tw-mint-100);
	--tw-link: var(--tw-mint-700);
	--tw-focus: var(--tw-mint-700);

	/* ---- 둥글기 5단계 ---- */
	--tw-radius-xs: 6px;
	--tw-radius-sm: 10px;
	--tw-radius-md: 14px;
	--tw-radius-lg: 20px;
	--tw-radius-pill: 999px;

	/* ---- 글자 크기 7단계 ---- */
	--tw-fs-caption: 12px;
	--tw-fs-small: 13px;
	--tw-fs-body: 15px;
	--tw-fs-lead: 17px;
	--tw-fs-title: 20px;
	--tw-fs-headline: 24px;
	--tw-fs-display: 32px;
	--tw-fw-regular: 400;
	--tw-fw-medium: 500;
	--tw-fw-bold: 700;
	--tw-fw-black: 900;
	--tw-font: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Roboto", sans-serif;

	/* ---- 간격 (4px 그리드) ---- */
	--tw-space-1: 4px;
	--tw-space-2: 8px;
	--tw-space-3: 12px;
	--tw-space-4: 16px;
	--tw-space-5: 20px;
	--tw-space-6: 24px;
	--tw-space-8: 32px;

	/* ---- 그림자 2단계 + 브랜드 글로우 ---- */
	--tw-shadow-card: 0 2px 10px rgba(21, 28, 26, 0.06);
	--tw-shadow-pop: 0 12px 32px rgba(21, 28, 26, 0.16);
	--tw-shadow-glow: 0 6px 20px rgba(35, 191, 148, 0.35);

	/* ---- 모션 ---- */
	--tw-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
	--tw-dur-fast: 120ms;
	--tw-dur: 200ms;
	--tw-dur-slow: 320ms;
}

/* 다크 토큰 — 정의만. 활성화는 <html data-tw-theme="dark"> 명시 시에만 (자동 전환 미적용) */
:root[data-tw-theme="dark"] {
	--tw-bg: #0b1410;
	--tw-surface: #111c17;
	--tw-surface-2: #16231d;
	--tw-line: #1f3028;
	--tw-line-strong: #2d3f36;
	--tw-text: #ecf5f0;      /* 16.84 */
	--tw-text-2: #b4c2bb;
	--tw-text-3: #8a9991;    /* 6.28 */
	--tw-text-disabled: #4c5a53;
	--tw-brand-soft: #0f2a20;
	--tw-brand-soft-2: #143527;
	--tw-link: var(--tw-mint-400);   /* 8.93 */
	--tw-focus: var(--tw-mint-400);
	--tw-danger: #ff6b6f;
	--tw-shadow-card: 0 2px 10px rgba(0, 0, 0, 0.4);
	--tw-shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.6);
	color-scheme: dark;
}