/* FILE: tokens.css | 저메추 공용 디자인 토큰(단일 원천) + 전역 a11y. 루트=원천, build.js가 public/으로 복사. 각 페이지 에서 link로 상속. 주: ref/ 는 별도 다크 컨셉이라 흡수하지 않고, 현재 라이브 라이트 브랜드를 정본으로 둔다. */ :root { /* ── color (라이트 브랜드) ── */ --bg: #f5f5f7; --card: #ffffff; --card2: #faf6f4; --border: #f0e0da; --accent: #dc655f; --accent2: #f09b6a; --gold: #c9a227; --kakao: #FEE500; --text: #1c1c1e; --muted: #6c6c70; /* ── radius scale (난립 14·16·20·22·24px → 단계화) ── */ --radius-sm: 10px; --radius-md: 14px; --radius-lg: 16px; --radius-xl: 20px; --radius-2xl: 24px; --radius-pill: 9999px; --radius: var(--radius-lg); /* 기존 단일 토큰 호환 */ /* ── shadow scale ── */ --shadow-1: 0 1px 4px rgba(0, 0, 0, .06); --shadow-2: 0 2px 12px rgba(0, 0, 0, .04); --shadow-3: 0 8px 28px rgba(0, 0, 0, .10); --shadow-accent: 0 8px 28px rgba(220, 101, 95, .16); /* ── spacing (8 리듬) ── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; /* ── type scale ── */ --text-xs: .76rem; --text-sm: .875rem; --text-base: 1rem; --text-lg: 1.25rem; --text-xl: 1.5rem; --text-2xl: 2.2rem; /* ── 터치 타깃 최소 ── */ --tap-min: 44px; } /* a11y: 키보드 포커스 가시화 (마우스 클릭엔 안 뜸) */ :where(button, [role="button"], a, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); } /* a11y: OS '동작 줄이기' 선호 존중 — 무한 회전/슬롯 등 정지 */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* a11y: 터치 환경에서 버튼/링크 최소 타깃 보강 */ @media (pointer: coarse) { button, [role="button"] { min-height: var(--tap-min); } }