/**
 * Laravel Nova 스타일 디자인 토큰 (라이트 / 다크)
 * design_renewal_2026_06_08 설계 §2 참조
 * 본 파일은 시각 토큰만 정의한다. 비즈니스 로직/마크업 변경 금지.
 */

:root {
	/* 색상 - Primary (노벨챗 사용자페이지 #7632ff 기준) */
	--color-primary-50:  #f1ecff;
	--color-primary-500: #7632ff;
	--color-primary-600: #6520e6;
	--color-primary-700: #5318c2;

	/* 색상 - Gray */
	--color-gray-50:  #f9fafb;
	--color-gray-100: #f3f4f6;
	--color-gray-200: #e5e7eb;
	--color-gray-300: #d1d5db;
	--color-gray-500: #6b7280;
	--color-gray-700: #374151;
	--color-gray-900: #111827;

	/* 색상 - Sidebar (라이트 모드에서도 짙은 톤 유지) */
	--color-sidebar-bg:        #1f2937;
	--color-sidebar-fg:        #e5e7eb;
	--color-sidebar-active-bg: rgba(118, 50, 255, 0.12);

	/* 색상 - Surface */
	--color-surface:        #ffffff;
	--color-surface-deeper: #f9fafb;

	/* 색상 - 상태 */
	--color-success:  #10b981;
	--color-warning:  #f59e0b;
	--color-danger:   #ef4444;
	--color-info:     #3b82f6;
	--color-favorite: #f59e0b;

	/* 라운드 */
	--radius-sm:   4px;
	--radius-md:   6px;
	--radius-lg:   8px;
	--radius-xl:   12px;
	--radius-full: 9999px;

	/* 그림자 */
	--shadow-sm:          0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.03);
	--shadow-md:          0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
	--shadow-lg:          0 12px 32px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.05);
	--shadow-focus-ring:  0 0 0 3px rgba(118, 50, 255, 0.25);

	/* 타이포그래피 */
	--font-size-page-title:    26px;
	--font-weight-page-title:  700;
	--line-height-page-title:  1.3;

	--font-size-section-title:   17px;
	--font-weight-section-title: 600;
	--line-height-section-title: 1.4;

	--font-size-body:   14px;
	--font-weight-body: 400;
	--line-height-body: 1.6;

	--font-size-label:   12px;
	--font-weight-label: 500;
	--line-height-label: 1.4;

	--font-size-caption:   11px;
	--font-weight-caption: 500;
	--line-height-caption: 1.4;

	--font-family-base: "Pretendard Variable", "Pretendard", "Noto Sans KR", "Spoqa Han Sans Neo", "SUIT Variable", "SUIT", -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* 여백 */
	--space-card-padding:      16px;
	--space-section-gap:       10px;
	--space-content-padding-x: 24px;
	--space-content-padding-y: 20px;

	/* 모션 */
	--motion-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
	--motion-base: 180ms cubic-bezier(0.4, 0, 0.2, 1);
	--motion-slow: 240ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* 다크 모드 — html.dark 클래스 / data-theme="dark" 모두 지원 */
[data-theme="dark"],
html.dark {
	--color-primary-50:  #1d1140;
	--color-primary-500: #9a6bff;
	--color-primary-600: #7632ff;
	--color-primary-700: #6520e6;

	--color-gray-50:  #0f172a;
	--color-gray-100: #1e293b;
	--color-gray-200: #334155;
	--color-gray-300: #475569;
	--color-gray-500: #94a3b8;
	--color-gray-700: #cbd5e1;
	--color-gray-900: #f8fafc;

	--color-sidebar-bg:        #1f2937;
	--color-sidebar-fg:        #cbd5e1;
	--color-sidebar-active-bg: rgba(118, 50, 255, 0.18);

	--color-surface:        #1f2937;
	--color-surface-deeper: #111827;

	--color-success:  #34d399;
	--color-warning:  #fbbf24;
	--color-danger:   #f87171;
	--color-info:     #60a5fa;
	--color-favorite: #fbbf24;

	--shadow-sm:          0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(0, 0, 0, 0.3);
	--shadow-md:          0 4px 12px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.3);
	--shadow-lg:          0 12px 32px rgba(0, 0, 0, 0.55), 0 4px 8px rgba(0, 0, 0, 0.4);
	--shadow-focus-ring:  0 0 0 3px rgba(154, 107, 255, 0.3);
}

/* 입력 요소 글로벌 토큰화 (검색/필터/조회 한정) */
.tw-app input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):focus-visible,
.tw-app select:focus-visible,
.tw-app textarea:focus-visible,
.tw-app button:focus-visible,
.tw-app a:focus-visible {
	outline: none;
	box-shadow: var(--shadow-focus-ring);
}

.tw-app input::placeholder,
.tw-app textarea::placeholder {
	color: var(--color-gray-500);
}

.tw-app input:disabled,
.tw-app select:disabled,
.tw-app textarea:disabled {
	background-color: var(--color-gray-100);
	color: var(--color-gray-500);
}