/* =============================================================================
   MyChive Design Tokens (v1.0)
   - 글로벌 전역 변수(:root)와 다크모드 토큰 재정의
   - 컴포넌트/페이지 CSS는 오직 본 토큰만 참조하도록 유지
   - 변경 이력:
     2025-10-13 최초 작성 (from style.css :root 블록 정리/확장)
============================================================================= */

/* ===============================
   1) Light Tokens (:root)
   =============================== */
:root {
	/* ===== Brand (기존 값 보존) ===== */
	/*--brand: linear-gradient(90deg, #4F8FF9 0%, #7faef8 100%);*/
	
	--brand:linear-gradient(to bottom, #4F8FF9 0%, #6FA5F8 100%);
	--brand-solid: #4F8FF9;
	--brand-050: #F9FCFF;
	/* body 메인 배경 - 거의 흰색에 가까운 파스텔 블루 */
	--brand-100: #E6F0FF;
	/* 아주 옅은 블루 (배경/soft tone) */
	--brand-200: #BFD9FF;
	/* 라이트 블루 (hover 배경, badge 등) */
	--brand-300: #94BFFF;
	/* 파스텔 블루 (secondary tone) */
	--brand-400: #5A9BFF;
	/* 중간 블루 (border, focus 등) */
	--brand-500: #4F8FF9;
	
	/* 메인 solid (Primary base) */
	--brand-600: #3A7BE0;
	/* 진한 블루 (hover/active base) */
	--brand-700: #2F6BD0;
	
	--tag-back: #f1f3f6;
	/* 더 진한 블루 (Pressed/강조) */

	--brand-neutral: linear-gradient(90deg, #e6ecf5 0%, #f2f6fa 100%);
	--on-brand-neutral: #3b495c;

	/* ===== Accent / Danger ===== */
	--accent: linear-gradient(90deg, #4FD1C5 0%, rgb(126, 201, 200) 70%);
	--accent-solid: #4FD1C5;
	/* 단색 사용 시 */
	--accent-100: #E6FFFA;
	/* 아주 연한 민트 */
	--accent-300: rgb(164, 227, 224);
	
	--accent-400: #66CFCB;
	--accent-500: #4FB7B3;
	/* hover/active */
	--accent-600: #38B2AC;
	
	
	--cta-disabled-bg: #6C7A80;
	--cta-disabled-text: #FFFFFF;
	
	
	
	
	
	--item-tile-accent:var(--accent-600);
	/* hover/active */
	
	
	

	--danger: linear-gradient(90deg, #FF5A5F 100%, rgb(255, 140, 140) 80%);
	--danger-solid: #E74C3C;

	/* ===== Semantic: Surface/Text/Border/Shadow ===== */
	/* Surface 단계: 컴포넌트 배경/섹션 대비를 단계로 관리 */
	--surface-0: #ffffff;
	--surface-25: #fcfdfe;
	--surface-50: var(--brand-050);
	--surface-100: #f5f7fa;
	--surface-150: #f1f3f6;
	/* 중립 회색, 따뜻함 없이 깨끗한 톤 */
	--surface-200: #eef2f7;


	/* Text 단계 */
	--text-900: #111827;
	/* 본문/헤더 텍스트 */
	--text-700: #1f2937;
	
	--text-500: #6b7280;
	/* 보조 텍스트/placeholder */

	/* Border 단계 */
	--border-100: rgba(0, 0, 0, .03);
	--border-200: rgba(0, 0, 0, .08);
	--border-400: rgba(0, 0, 0, .12);

	/* Shadow 단계 */
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, .06), 0 1px 1px rgba(0, 0, 0, .03);
	--shadow-md: 0 4px 14px rgba(0, 0, 0, .12);

	/* ===== Interactive / State ===== */
	--on-brand: #ffffff;
	
	--on-dark-text:#000000;
	
	/* 브랜드 배경 위 텍스트/아이콘 */
	--on-light: var(--text-900);
	/* 라이트 배경 위 텍스트 */
	--on-dark: #f8f9fa;
	/* 다크 대비용 텍스트 */

	--ring: #7aa7ff;
	/* 포커스 링(브랜드 톤에서 파생) */
	--ring-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 40%, transparent);

	/* 버튼/호버 (토큰만 참조) */
	--btn-hover-bg: color-mix(in srgb, var(--surface-200) 70%, transparent);
	--btn-hover-color: var(--text-900);
	--btn-hover-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	--btn-hover-transform: translateY(1px);

	/* 전역 트랜지션: 필요한 속성만, 짧게 */
	--btn-transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .12s ease;

	/* ===== Header(시맨틱 참조) ===== */
	--header-h: 3.25rem;
	/* 필요 시 3.0rem로 조정 */
	--header-pad-x: .75rem;
	--header-bg: var(--surface-0);
	--header-fg: var(--text-900);
	--header-fg-muted: var(--text-500);
	--header-divider: var(--border-200);

	/* ===== Legacy Aliases (점진 폐기 예정) =====
     - 기존 style.css 호환을 위해 유지
     - 신규 코드에서는 아래 변수 사용 금지 (시맨틱 토큰 사용)
  */
	--surface: var(--surface-0);
	--surface-muted: var(--surface-50);
	--divider: var(--border-200);
	--fg: var(--text-900);
	--fg-muted: var(--text-500);
	--badge-secondary: #6c757d;
	/* 필요 시 후속 토큰화 */


	/* Text 확장: #444, #374151 등 보조 톤 */
	--text-600: #374151;
	/* 기존 #444 / #374151 치환용 */

	/* Border 확장: #ddd, #cccccc 등 연한 경계선 */
	
	/* 매우 연함(#ebebeb~#f0f0f0 유사) */

	/* Overlay/Alpha 유틸: rgba(0,0,0,0.04~0.15), rgba(255,255,255,0~.5) 치환 */
	--ink-04: rgba(0, 0, 0, .04);
	--ink-05: rgba(0, 0, 0, .05);
	--ink-08: rgba(0, 0, 0, .08);
	--ink-10: rgba(0, 0, 0, .10);
	--ink-15: rgba(0, 0, 0, .15);
	--ink-70: rgba(0, 0, 0, .7);
	--ink-900: var(--brand-solid);
	

	--paper-00: rgba(255, 255, 255, 0);
	--paper-10: rgba(255, 255, 255, .10);
	--paper-30: rgba(255, 255, 255, .30);
	--paper-50: rgba(255, 255, 255, .50);

	/* Shadow 확장 */
	--shadow-lg: 0 10px 24px rgba(0, 0, 0, .18);

	/* 상태/태그 색 (기존 하드코딩 #값 치환용) */
	--success-solid: #6BE3A2;
	/* 예: #6be3a2 */
	--warning-solid: #FFDD6D;
	/* 예: #ffdd6d */
	--info-solid: #696CD4;
	/* 예: #696cd4 */
	
	--tutorial-shadow:#7c3aed;
	
	
	--tutorial-tooltip:rgb(65, 65, 65);
	
	

	--tag-pink: #FF97B5;
	/* 예: #ff97b5 */
	--tag-red: #FF6B6B;
	/* 예: #ff6b6b */
	--tag-yellow: #FFDD6D;
	/* 예: #ffdd6d */
	--tag-green: #6BE3A2;
	/* 예: #6be3a2 */
	--tag-indigo: #696CD4;
	/* 예: #696cd4 */
	--tag-sky: #80D4FF;
	/* 예: #80d4ff */

	/* Form 전용(치환 편의): placeholder/입력 배경/경계 */
	--input-bg: var(--surface-0);
	/* #fff */
	--input-border: var(--border-200);
	/* #dee2e6 등 */
	--input-placeholder: var(--text-500);
	/* #6c757d 등 */

	/* 헤더 스크롤 상태용(선택): 반투명 배경 톤 */
	--header-bg-translucent: color-mix(in srgb, var(--header-bg) 85%, transparent);

	--state-positive: #10b981;
	/* 기존 --ok */

	/* 경고 / 주의 / 안읽음 */
	--state-warn: #f59e0b;
	/* 기존 --warn */

	/* (옵션) 오류 / 위험 */
	--state-error: #dc3545;
	/* 붉은 톤 기본값 */

	/* (옵션) 정보 / 중립 */
	--state-info: #3b82f6;
	/* 브랜드 블루 계열 */
}

/* ===============================
   2) Dark Tokens ([data-theme="dark"])
   =============================== */
html[data-theme="dark"] {
	/* Surface */
	--surface-0: #24272c;
	--surface-25: #20242a;
	/* ← surface-900(배경)과 2~3단계 밝은 정도 */
	--surface-50: #181b20;
	--surface-100: #2a2f36;
	--surface-150: #1f242a;
	/* #1d1f22(25)보다 약간 밝고, #222426(25 다크)보다 살짝 어둡게 */
	--surface-200: #313842;

	/* Text */
	--text-900: #f5f6f7;
	--text-700: #e5e9ee;
	--text-500: #9aa3ad;

	/* Border */
	--border-100: rgba(255, 255, 255, .10);
	--border-200: rgba(255, 255, 255, .16);
	--border-400: rgba(255, 255, 255, .24);

	/* Shadow (다크는 강도로 컨트라스트 보완) */
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, .34), 0 1px 1px rgba(0, 0, 0, .22);
	--shadow-md: 0 12px 28px rgba(0, 0, 0, .60);

	/* Header */
	--header-bg: var(--surface-0);
	--header-fg: var(--text-900);
	--header-fg-muted: var(--text-500);
	--header-divider: var(--border-200);

	/* Hover tone */
	--btn-hover-bg: color-mix(in srgb, var(--surface-200) 85%, transparent);
	--btn-hover-color: var(--text-900);

	/* Text 확장 */
	--text-600: #dadfe5;
	/* 라이트의 #374151 대응 다크 톤 */

	/* Border 확장 */
	

	/* Overlay/Alpha 유틸 */
	--brand-800: var(--brand-600);
	--surface-700: var(--surface-100);
	--surface-800: var(--surface-200);
	--surface-900: var(--surface-50);
	--border-600: var(--border-200);
	--border-700: var(--border-400);
	--text-0: var(--on-brand);

	--ink-04: rgba(255, 255, 255, .05);
	--ink-05: rgba(255, 255, 255, .06);
	--ink-08: rgba(255, 255, 255, .10);
	--ink-10: rgba(255, 255, 255, .12);
	--ink-15: rgba(255, 255, 255, .14);

	--paper-00: rgba(255, 255, 255, 0);
	--paper-10: rgba(255, 255, 255, .10);
	--paper-30: rgba(255, 255, 255, .30);
	--paper-50: rgba(255, 255, 255, .50);

	/* Shadow 확장 */
	--shadow-lg: 0 16px 36px rgba(0, 0, 0, .65);
	
	--item-tile-accent: #E6FFFA;

	/* 상태/태그 색(다크 가독 보정 살짝 톤 조정) */
	--success-solid: #5dd490;
	--warning-solid: #ffd356;
	--info-solid: #7d86e0;

	--tag-pink: #ff84a8;
	--tag-red: #ff6b6b;
	--tag-yellow: #ffd356;
	--tag-green: #5dd490;
	--tag-indigo: #7d86e0;
	--tag-sky: #7bc8ff;

	/* Form 전용(치환 편의) */
	--input-bg: var(--surface-150);
	--input-border: var(--border-200);
	--input-placeholder: var(--text-500);

	/* 헤더 스크롤 상태용(선택) */
	--header-bg-translucent: color-mix(in srgb, var(--header-bg) 85%, transparent);
	
	/* 다크모드에선 명도 보정만 약간 */
	 --state-positive: #34d399; /* 밝기 +10~15% */
	 --state-warn: #fbbf24;
	 --state-error: #ef4444;
	 --state-info: #60a5fa;

}

/* ===============================
   3) 운영 가이드(요약)
   - 컴포넌트/페이지 CSS는 색상값을 직접 사용하지 말고,
     위 시맨틱 토큰만 참조할 것.
   - 테마 전환은 data-theme="dark" 토글만으로 가능한 상태를 유지.
   - 기존 .darkmode 클래스 의존 코드는 단계적으로 제거.
=============================== */