/* ==========================================================================
MOOL (물) — Design Tokens v2
2026-11-06 · brand/tokens.css (v2: 포인트 3색 — 민호 결정 2026-11-06)
--------------------------------------------------------------------------
원칙
- 바탕·글자·선은 흑·백·회색 15단계. 상태는 먼저 반전 · 굵기 · 패턴
(해치/점묘) · 선 두께 · 기호 · 문장으로 표시한다.
- 포인트 색은 세 개, 정해진 자리에만(brand.md §9 · components.md §1-6):
물빛 #1F4BFF = 차오름 · 수위선 · 진행 / 라임 #C8FF2E = 축하 순간 전면
경고 #FF4A1C = 경고 띠 · 신고 · 기한 임박 · 보류/반려 · 오류 · 되돌릴 수 없는 행동
색은 덧붙이는 신호다. 색만으로 뜻을 전하지 않는다(모양·글자가 먼저).
컴포넌트는 아래 역할 토큰(--accent* --celebrate* --warn*)만 쓴다. 원값(--blue-* 등) 직접 사용 금지.
- 기본 테마 = 라이트(낮). 다크(밤)는 사용자가 고르는 두 번째 테마.
이유: ① 검정 바탕은 지난 시안의 "위압적 럭셔리"와 밤 유흥 연상
('물 좋다' 은어 리스크)을 키운다. ② 사람 사진은 밝은 바탕에서 더
정직하게 보인다. ③ 낮의 모임·대화가 기본 장면이다.
- 모서리는 0. 둥근 것은 사람(아바타)과 로고의 O 뿐.
- 모든 대비 값은 components.md §2 에 계산 결과를 적었다.
========================================================================== */
/* ---------- 0. 웹폰트 (공식 배포처) ---------------------------------------
SUIT Variable — OFL 1.1 · https://github.com/sun-typeface/SUIT
Archivo (wdth 62–125, wght 100–900) — OFL 1.1 · https://github.com/Omnibus-Type/Archivo
------------------------------------------------------------------------- */
:root {
/* ---------- 1. 그레이 스케일 (테마 무관 원값) ---------- */
--gray-0: #FFFFFF;
--gray-25: #FAFAFA;
--gray-50: #F5F5F5;
--gray-100: #F0F0F0;
--gray-150: #E8E8E8;
--gray-200: #DADADA;
--gray-300: #C2C2C2;
--gray-400: #A3A3A3;
--gray-500: #8F8F8F;
--gray-600: #6A6A6A;
--gray-700: #525252;
--gray-800: #2E2E2E;
--gray-850: #1E1E1E;
--gray-900: #141414;
--gray-950: #0A0A0A;
/* ---------- 1b. 포인트 원값 (OKLCH 색상각을 고정해 밝기만 옮김) ---------- */
--blue-500: #1F4BFF; /* 물빛 — oklch(0.522 0.267 265.5) */
--blue-400: #5987FC; /* 물빛 밤 — oklch(0.65 0.18 265.5) */
--lime-400: #C8FF2E; /* 라임 — oklch(0.929 0.221 124.4) */
--lime-500: #B5E632; /* 라임 밤 — oklch(0.86 0.20 124.4), 밤 전면이 눈부시지 않게 */
--lime-ink-muted: #3D3D3D; /* 라임 위 보조 글자 */
--red-500: #FF4A1C; /* 경고 — oklch(0.666 0.224 34.3) */
--red-700: #C43005; /* 경고 글자(낮) — oklch(0.54 0.19 34.3) */
--red-400: #FB5C38; /* 경고 글자(밤) — oklch(0.68 0.20 34.3) */
/* ---------- 2. 역할 토큰 — 라이트(기본) ---------- */
--ground: var(--gray-25); /* 화면 바탕 */
--surface: var(--gray-0); /* 카드·시트 (바탕보다 한 단계 밝음, 선 없이 구분) */
--sunken: var(--gray-100); /* 입력칸·사진 자리·눌린 행 */
--ink: var(--gray-950); /* 본문·제목·기본 버튼 채움 */
--ink-muted: var(--gray-700); /* 보조 문장 (7.49:1 on ground) */
--ink-faint: var(--gray-600); /* 메타·플레이스홀더 (최저 4.5:1 유지) */
--ink-disabled: var(--gray-400); /* 비활성 글자 — 반드시 '왜 비활성인지' 문장 동반 */
--inverse: var(--gray-25); /* 반전 블록 위 글자 */
--line: var(--gray-200); /* 목록 구분선(1px)만 */
--line-control: var(--gray-500); /* 컨트롤 테두리 3.1:1 이상 */
--line-strong: var(--gray-950); /* 수위선·포커스·선택 */
--scrim: rgb(10 10 10 / 0.56); /* 시트 뒤 가림막 (떠 있는 것만) */
/* ---------- 2b. 포인트 역할 토큰 — 라이트 (대비는 components.md §2-1b) ---------- */
/* 물빛: 차오름 채움 · 수위선 · 진행 막대 · 포커스된 입력 바닥선 · (웹) 링크 */
--accent: var(--blue-500); /* 채움 면 */
--accent-ink: var(--gray-0); /* 채움 위 글자 5.99:1 */
--accent-text: var(--blue-500); /* 바탕 위 글자(링크) 5.73:1 on ground */
--accent-line: var(--blue-500); /* 2px 수위선 · 4px 진행 */
/* 라임: 축하 순간 전면(S15 승인 · S24 서로 관심 · S45 모임 확정)만. 글자로 쓰지 않는다 */
--celebrate: var(--lime-400);
--celebrate-ink: var(--gray-950); /* 16.78:1 */
--celebrate-ink-muted: var(--lime-ink-muted); /* 9.21:1 */
/* 경고: 띠·신고·기한 임박·보류/반려·오류·되돌릴 수 없는 행동 */
--warn: var(--red-500); /* 채움 면 — 위 글자는 반드시 --warn-ink */
--warn-ink: var(--gray-950); /* 경고 채움 위 글자 5.89:1 */
--warn-text: var(--red-700); /* 바탕 위 경고 글자 5.33:1 on ground, 4.89 on sunken */
--warn-line: var(--red-700); /* 해치·상태 사각 선 (얇은 선이라 진한 쪽) */
/* ---------- 3. 타이포그래피 ---------- */
--font-text: "SUIT Variable", "SUIT", "Pretendard Variable", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
/* 숫자·로마자 강조(인원 2:2, 시간 21:00, 날짜). 한글은 자동으로 SUIT로 떨어진다 */
--font-figure: "Archivo", "SUIT Variable", "Helvetica Neue", Arial, sans-serif;
--figure-wide: 125%; /* font-stretch: 확장형 = MOOL의 숫자 목소리 */
--figure-tight: 75%; /* 좁은 자리(탭 카운트, 표) */
/* 크기 — 6단, 서로 멀리. (px 기준, rem = 16px) */
--fs-meta: 0.75rem; /* 12 · 메타, 법적 고지. 이보다 작은 글자 없음 */
--fs-small: 0.875rem; /* 14 · 보조 본문, 칩, 탭 */
--fs-body: 1rem; /* 16 · 본문, 버튼, 입력 */
--fs-title: 1.25rem; /* 20 · 카드 제목, 게시글 제목 */
--fs-headline: 1.75rem; /* 28 · 화면 제목, 프로필 이름 */
--fs-figure: 2.75rem; /* 44 · 숫자 조판 전용(2:2, 07:42) — 문장에 쓰지 않음 */
--fs-mark: clamp(4rem, 2rem + 12vw, 13rem); /* 브랜드 화면의 워드마크 */
--lh-tight: 1.0; /* 숫자 조판 */
--lh-head: 1.25; /* 제목 */
--lh-body: 1.55; /* 본문(한글은 영문보다 넉넉히) */
--tracking-figure: -0.02em;
--tracking-head: -0.03em;
--tracking-body: -0.01em;
/* 굵기는 두 개뿐: 보통과 굵게. 중간 굵기 금지 (시그니처 장치 §4) */
--fw-regular: 400;
--fw-bold: 700;
--fw-figure: 800; /* Archivo 숫자 전용 */
/* ---------- 4. 간격 (4px 기반) ---------- */
--space-0: 0;
--space-1: 0.25rem; /* 4 */
--space-2: 0.5rem; /* 8 */
--space-3: 0.75rem; /* 12 */
--space-4: 1rem; /* 16 */
--space-5: 1.25rem; /* 20 · 모바일 좌우 여백 */
--space-6: 1.5rem; /* 24 */
--space-8: 2rem; /* 32 */
--space-10: 2.5rem; /* 40 */
--space-14: 3.5rem; /* 56 */
--space-20: 5rem; /* 80 */
--gutter: var(--space-5);
/* ---------- 5. 모서리 ---------- */
--radius-0: 0; /* 모든 면·버튼·입력·칩·시트 */
--radius-person: 999px; /* 아바타(사람)와 로고의 O 에만 */
/* ---------- 6. 선 두께 ---------- */
--stroke-hair: 1px; /* 목록 행 구분(--line 색)에만 */
--stroke-base: 2px; /* 수위선, 보조 버튼 테두리, 입력 밑줄, 포커스 */
--stroke-bold: 4px; /* 진행 수위, 오류 막대 */
/* ---------- 7. 크기·터치 ---------- */
--hit: 44px; /* 최소 터치 영역 (iOS HIG 44pt / Android 48dp 권장 → 주요 버튼은 52) */
--control-h: 52px; /* 기본 버튼·입력 높이 */
--control-sm: 44px; /* 작은 버튼·칩 줄 */
--tabbar-h: 56px;
--avatar-s: 32px;
--avatar-m: 44px;
/* ---------- 8. 모션 ---------- */
/* '차오름': 빠르게 시작해 수면에서 멈추듯 감속. 튕김(바운스) 금지 */
--ease-fill: cubic-bezier(0.22, 1, 0.36, 1); /* 반전·채움·등장 */
--ease-drain: cubic-bezier(0.64, 0, 0.78, 0); /* 빠짐·퇴장 */
--ease-move: cubic-bezier(0.65, 0, 0.35, 1); /* 화면 전환, 시트 */
--dur-press: 90ms; /* 눌림 */
--dur-fill: 200ms; /* 선택 반전(아래→위 채움) */
--dur-enter: 320ms; /* 카드·토스트 등장 */
--dur-sheet: 420ms; /* 시트·화면 */
--dur-tide: 1200ms; /* 로딩 수위 1회 왕복 */
--rise: 12px; /* 등장 시 떠오르는 거리 */
/* ---------- 9. 패턴 (상태 표식 — 색보다 먼저 오는 신호) ---------- */
/* 하드스톱 패턴 전용. 부드러운 그라디언트 용도로 쓰지 않는다.
currentColor 를 쓰므로 반전 블록 안에서는 자동으로 흰 패턴이 된다 */
--pat-hatch: repeating-linear-gradient(135deg, currentColor 0 1.5px, transparent 1.5px 6px); /* 오류·반려·마감 */
--pat-dots: radial-gradient(currentColor 1px, transparent 1.4px) 0 0 / 5px 5px; /* 심사 중·대기 */
color-scheme: light;
}
/* ---------- 역할 토큰 — 다크(밤) ---------- */
[data-theme="dark"] {
--ground: var(--gray-950);
--surface: var(--gray-900);
--sunken: var(--gray-850);
--ink: #F5F5F5;
--ink-muted: #B0B0B0; /* 9.13:1 on ground */
--ink-faint: #949494; /* 6.53:1 on ground, 5.50:1 on sunken */
--ink-disabled: #5C5C5C;
--inverse: var(--gray-950);
--line: var(--gray-800);
--line-control: #6B6B6B;
--line-strong: #F5F5F5;
--scrim: rgb(0 0 0 / 0.64);
/* 포인트 — 밤: 물빛은 밝기를 올리고 채도를 낮춘다(밤의 반전 = 밝은 면·검은 글자와 같은 문법) */
--accent: var(--blue-400);
--accent-ink: var(--gray-950); /* 5.94:1 */
--accent-text: var(--blue-400); /* 5.94 on ground · 5.52 surface · 5.00 sunken */
--accent-line: var(--blue-400);
--celebrate: var(--lime-500); /* 검은 글자 13.51:1 · 보조 7.41:1 */
--warn-text: var(--red-400); /* 6.31 on ground · 5.87 surface · 5.31 sunken */
--warn-line: var(--red-400);
color-scheme: dark;
}
/* 동작 줄이기: 이동은 없애고 상태 변화(반전)는 즉시 적용 */
@media (prefers-reduced-motion: reduce) {
:root {
--dur-press: 0ms; --dur-fill: 0ms; --dur-enter: 0ms; --dur-sheet: 0ms;
--rise: 0px;
}
}