ANTOOZA-FRONTEND/app/styles/tokens/_colors.scss

// ─────────────────────────────────────────────────────────────
// D6 디자인 토큰 — 컬러 (다크 기본 + 라이트)
// 테마 스위칭: html 클래스 `.dark`/`.light` + `data-theme` 속성 — app/layout.tsx 의 FOUC 방지 인라인 스크립트가 첫 페인트 전 세팅
// 원칙 (d6-design-system.md §3):
//  - 기존 시맨틱 변수명(--bg-page, --text-primary 등)은 전부 보존 — 값만 그레이 램프 기반으로 재정의 (기존 ~50개 style.scss 무수정 호환)
//  - 포인트 컬러는 --az-accent 1개 (개미 오렌지). 기존 --color-accent / --btn-primary 는 alias 로 수렴
//    ※ 설계 문서의 `--accent` 이름은 shadcn HSL triplet(--accent)과 충돌하여 --az-accent 로 명명
//  - 상승 빨강(--price-up) / 하락 파랑(--price-down) — 국내 관례, WCAG AA 대비 검증값
//  - 헤더 토큰(--bg-head/--text-head/--bg-icon/--head-*)은 라이트 테마에서도 다크 고정 (amazon 방식)
// ─────────────────────────────────────────────────────────────

// ── 다크 (기본) ──
:root {
	color-scheme: dark;

	// 그레이 램프 15단 (배경 → 전경)
	--gray-0: #0b0c0f;
	--gray-1: #111318;
	--gray-2: #16181d;
	--gray-3: #1c1f26;
	--gray-4: #22262e;
	--gray-5: #2a2f38;
	--gray-6: #353b46;
	--gray-7: #454c59;
	--gray-8: #5a6270;
	--gray-9: #717a88;
	--gray-10: #8b93a1;
	--gray-11: #a6adb9;
	--gray-12: #c2c8d1;
	--gray-13: #dde1e7;
	--gray-14: #f2f4f7;

	// 기능 컬러 — 등락 (색+부호 병행 원칙, 등락 표시에 --az-accent 사용 금지)
	--price-up: #f2555f;
	--price-down: #4a8df2;
	--price-flat: var(--gray-10);

	// 포인트 컬러 (유일) — 액션 버튼·활성 탭·포커스 링 전용
	--az-accent: #f7931a;
	--az-accent-hover: #f59e0b;

	// 시맨틱 — 램프 참조 (테마 전환 시 램프 재정의로 자동 반영, 기존 변수명 보존)
	--bg-page: var(--gray-0);
	--bg-elevated: var(--gray-2);
	--bg-subtle: var(--gray-3);
	--bg-input: var(--gray-2);
	--bg-card: var(--gray-2); // 기존 미정의 참조 보정
	--bg-default: var(--gray-0); // 기존 미정의 참조 보정
	--border-light: var(--gray-3);
	--border-subtle: var(--gray-3); // 기존 미정의 참조 보정
	--border-default: var(--gray-4);
	--border-strong: var(--gray-6);
	--text-muted: var(--gray-9);
	--text-secondary: var(--gray-11);
	--text-primary: var(--gray-13);
	--text-normal: var(--gray-14);
	--fg-default: var(--gray-14);
	--btn-default-border: var(--gray-6);
	--btn-default-hover: var(--gray-4);

	// 헤더 — 양 테마 다크 고정 (라이트 블록에서 재정의하지 않음)
	--bg-head: #111318;
	--text-head: #c2c8d1;
	--bg-icon: #22262e;
	--outline-default: #454c59;
	--head-input-bg: #1c1f26;
	--head-input-text: #dde1e7;
	--head-input-placeholder: #717a88;
	--head-input-border: #353b46;

	// 포인트 alias (기존 변수명 보존)
	--color-accent: var(--az-accent);
	--color-accent-hover: var(--az-accent-hover);
	--btn-primary: var(--az-accent);
	--btn-primary-hover: var(--az-accent-hover);
	--btn-primary-shadow: #b96504;
	--btn-primary-text: #201503; // 오렌지 위 잉크 텍스트 — 흰색은 AA 미달

	// 테마별 리터럴
	--text-link: #60a5fa;
	--text-link-hover: #3b82f6;
	--shadow-color: rgba(0, 0, 0, 0.45);
	--color-danger: #ef4444;
	--color-success: #22c55e;
	--color-warning-bg: #422006;
	--color-warning-text: #fef08a;
	--overlay-color: rgba(0, 0, 0, 0.7);
	--sidebar-active-bg: #3d2800;
	--list-row-active: #2a2a00;
	--color-blue: #60a5fa;
	--color-blue-hover: #3b82f6;
	--color-blue-bg: rgba(96, 165, 250, 0.1);
	--color-purple: #a78bfa;
	--color-purple-hover: #8b5cf6;
	--color-purple-bg: rgba(167, 139, 250, 0.15);
	--color-danger-bg: #3f1212;
	--color-danger-border: #7f1d1d;
	--color-success-bg: #0f2d1a;
	--color-success-text: #4ade80;
	--bg-subtle-hover: rgba(255, 255, 255, 0.05);
	// FAQ Q/A 라벨 — dark 배경 시인성용 밝기 ↑
	--faq-q-color: #3fbd54;
	--faq-a-color: #ff6b4a;

	// shadcn HSL triplet — 그레이 램프 파생값 (시각적 단일화, 통합은 장기 과제)
	--background: 225 15% 5%;
	--foreground: 218 17% 89%;
	--card: 220 12% 10%;
	--card-foreground: 218 17% 89%;
	--popover: 220 12% 10%;
	--popover-foreground: 218 17% 89%;
	--primary: 218 17% 89%;
	--primary-foreground: 222 13% 13%;
	--secondary: 221 14% 16%;
	--secondary-foreground: 218 17% 89%;
	--muted: 221 14% 16%;
	--muted-foreground: 216 10% 59%;
	--accent: 221 14% 16%;
	--accent-foreground: 218 17% 89%;
	--destructive: 0 63% 31%;
	--destructive-foreground: 0 0% 98%;
	--border: 221 14% 16%;
	--input: 221 14% 16%;
	--ring: 33 93% 54%; // 포인트 컬러 1개 원칙 — 포커스 링도 개미 오렌지
	--chart-1: 220 70% 50%;
	--chart-2: 160 60% 45%;
	--chart-3: 30 80% 55%;
	--chart-4: 280 65% 60%;
	--chart-5: 340 75% 55%;
	--crypto-up: 356 86% 64%; // = --price-up (레거시 alias, 신규 코드는 --price-* 사용)
	--crypto-down: 216 87% 62%; // = --price-down
	--crypto-neutral: 216 10% 59%;
	--sidebar-background: 240 5.9% 10%;
	--sidebar-foreground: 240 4.8% 95.9%;
	--sidebar-primary: 224.3 76.3% 48%;
	--sidebar-primary-foreground: 0 0% 100%;
	--sidebar-accent: 240 3.7% 15.9%;
	--sidebar-accent-foreground: 240 4.8% 95.9%;
	--sidebar-border: 240 3.7% 15.9%;
	--sidebar-ring: 217.2 91.2% 59.8%;
}

// ── 라이트 ──
// 램프를 역할 등가로 뒤집어 재정의 → 시맨틱 매핑(--bg-page: var(--gray-0) 등)은 공통 유지
// 헤더 토큰(--bg-head 등)은 여기서 재정의하지 않음 = 다크 고정
html.light,
[data-theme='light'] {
	color-scheme: light;

	--gray-0: #ffffff;
	--gray-1: #f8f9fb;
	--gray-2: #f2f4f7;
	--gray-3: #e9ecf1;
	--gray-4: #dde1e7;
	--gray-5: #cfd4dc;
	--gray-6: #b6bcc7;
	--gray-7: #99a1ae;
	--gray-8: #7e8695;
	--gray-9: #667080;
	--gray-10: #545d6b;
	--gray-11: #424a57;
	--gray-12: #313843;
	--gray-13: #21262e;
	--gray-14: #14171c;

	--price-up: #d02330;
	--price-down: #1861d8;
	--price-flat: var(--gray-9);

	--az-accent: #d97800;
	--az-accent-hover: #b96504;
	--btn-primary-shadow: #a35a00;
	// 라이트 테마 accent(#d97800)는 더 어두워 잉크(#201503) 텍스트가 저대비 → 흰색으로 오버라이드(가독성)
	--btn-primary-text: #ffffff;

	--text-link: #0060a9;
	--text-link-hover: #c7511f;
	--shadow-color: rgba(0, 0, 0, 0.12);
	--color-danger: #d51b28;
	--color-success: #4caf50;
	--color-warning-bg: #fefce8;
	--color-warning-text: #92400e;
	--overlay-color: rgba(0, 0, 0, 0.5);
	--sidebar-active-bg: #fff3e0;
	--list-row-active: #faffd1;
	--color-blue: #3b82f6;
	--color-blue-hover: #2563eb;
	--color-blue-bg: rgba(59, 130, 246, 0.06);
	--color-purple: #8b5cf6;
	--color-purple-hover: #7c3aed;
	--color-purple-bg: rgba(139, 92, 246, 0.06);
	--color-danger-bg: #fee2e2;
	--color-danger-border: #fca5a5;
	--color-success-bg: #dcfce7;
	--color-success-text: #16a34a;
	--bg-subtle-hover: rgba(0, 0, 0, 0.05);
	--faq-q-color: #0b671b;
	--faq-a-color: #ff4727;

	--background: 0 0% 100%;
	--foreground: 222 13% 15%;
	--card: 0 0% 100%;
	--card-foreground: 222 13% 15%;
	--popover: 0 0% 100%;
	--popover-foreground: 222 13% 15%;
	--primary: 222 13% 15%;
	--primary-foreground: 216 24% 96%;
	--secondary: 216 22% 93%;
	--secondary-foreground: 222 13% 15%;
	--muted: 216 22% 93%;
	--muted-foreground: 216 11% 45%;
	--accent: 216 22% 93%;
	--accent-foreground: 222 13% 15%;
	--destructive: 0 84.2% 60.2%;
	--destructive-foreground: 0 0% 98%;
	--border: 213 17% 89%;
	--input: 213 17% 89%;
	--ring: 33 100% 43%;
	--chart-1: 12 76% 61%;
	--chart-2: 173 58% 39%;
	--chart-3: 197 37% 24%;
	--chart-4: 43 74% 66%;
	--chart-5: 27 87% 67%;
	--crypto-up: 356 71% 48%;
	--crypto-down: 217 80% 47%;
	--crypto-neutral: 216 11% 45%;
	--sidebar-background: 0 0% 98%;
	--sidebar-foreground: 240 5.3% 26.1%;
	--sidebar-primary: 240 5.9% 10%;
	--sidebar-primary-foreground: 0 0% 98%;
	--sidebar-accent: 240 4.8% 95.9%;
	--sidebar-accent-foreground: 240 5.9% 10%;
	--sidebar-border: 220 13% 91%;
	--sidebar-ring: 217.2 91.2% 59.8%;
}