/* ========================================================================== tokens.css — 세담 디자인 토큰 (토스 디자인 언어 실측 기반, 자체 구현) 근거: _handoff/TDS_SPEC.md (2026-07-20 실측) 접두 --sd- : 기존 CSS 변수와 충돌 방지 이 파일은 변수 선언만 포함한다. 컴포넌트 스타일은 Phase 2부터. ========================================================================== */ :root { /* ---------- 폰트 ---------- */ --sd-font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", "Segoe UI", "Malgun Gothic", sans-serif; /* ---------- Grey (텍스트·배경·구분의 뼈대) ---------- */ --sd-grey50: #f9fafb; --sd-grey100: #f2f4f6; --sd-grey200: #e5e8eb; --sd-grey300: #d1d6db; --sd-grey400: #b0b8c1; --sd-grey500: #8b95a1; --sd-grey600: #6b7684; --sd-grey700: #4e5968; --sd-grey800: #333d4b; --sd-grey900: #191f28; /* ---------- GreyOpacity (반투명 — 구분선·딤·그림자) ---------- */ --sd-grey-op50: rgba(0, 23, 51, 0.02); --sd-grey-op100: rgba(2, 32, 71, 0.05); --sd-grey-op200: rgba(0, 27, 55, 0.1); --sd-grey-op300: rgba(0, 29, 58, 0.18); --sd-grey-op400: rgba(0, 25, 54, 0.31); --sd-grey-op500: rgba(3, 24, 50, 0.46); --sd-grey-op600: rgba(0, 19, 43, 0.58); --sd-grey-op700: rgba(3, 18, 40, 0.7); --sd-grey-op800: rgba(0, 12, 30, 0.8); --sd-grey-op900: rgba(2, 9, 19, 0.91); /* ---------- Blue (주 액센트) ---------- */ --sd-blue50: #e8f3ff; --sd-blue100: #c9e2ff; --sd-blue200: #90c2ff; --sd-blue300: #64a8ff; --sd-blue400: #4593fc; --sd-blue500: #3182f6; --sd-blue600: #2272eb; --sd-blue700: #1b64da; --sd-blue800: #1957c2; --sd-blue900: #194aa6; /* ---------- Red (오류·위험) ---------- */ --sd-red50: #ffeeee; --sd-red100: #ffd4d6; --sd-red200: #feafb4; --sd-red300: #fb8890; --sd-red400: #f66570; --sd-red500: #f04452; --sd-red600: #e42939; --sd-red700: #d22030; --sd-red800: #bc1b2a; --sd-red900: #a51926; /* ---------- Orange (주의) ---------- */ --sd-orange50: #fff3e0; --sd-orange100: #ffe0b0; --sd-orange200: #ffcd80; --sd-orange300: #ffbd51; --sd-orange400: #ffa927; --sd-orange500: #fe9800; --sd-orange600: #fb8800; --sd-orange700: #f57800; --sd-orange800: #ed6700; --sd-orange900: #e45600; /* ---------- Yellow ---------- */ --sd-yellow50: #fff9e7; --sd-yellow100: #ffefbf; --sd-yellow200: #ffe69b; --sd-yellow300: #ffdd78; --sd-yellow400: #ffd158; --sd-yellow500: #ffc342; --sd-yellow600: #ffb331; --sd-yellow700: #faa131; --sd-yellow800: #ee8f11; --sd-yellow900: #dd7d02; /* ---------- Green (성공) ---------- */ --sd-green50: #f0faf6; --sd-green100: #aeefd5; --sd-green200: #76e4b8; --sd-green300: #3fd599; --sd-green400: #15c47e; --sd-green500: #03b26c; --sd-green600: #02a262; --sd-green700: #029359; --sd-green800: #028450; --sd-green900: #027648; /* ---------- Teal ---------- */ --sd-teal50: #edf8f8; --sd-teal100: #bce9e9; --sd-teal200: #89d8d8; --sd-teal300: #58c7c7; --sd-teal400: #30b6b6; --sd-teal500: #18a5a5; --sd-teal600: #109595; --sd-teal700: #0c8585; --sd-teal800: #097575; --sd-teal900: #076565; /* ---------- Purple ---------- */ --sd-purple50: #f9f0fc; --sd-purple100: #edccf8; --sd-purple200: #da9bef; --sd-purple300: #c770e4; --sd-purple400: #b44bd7; --sd-purple500: #a234c7; --sd-purple600: #9128b4; --sd-purple700: #8222a2; --sd-purple800: #73228e; --sd-purple900: #65237b; /* ---------- 시맨틱 컬러 ---------- */ --sd-white: #ffffff; --sd-black: #000000; --sd-bg: var(--sd-white); /* 기본 페이지 배경 */ --sd-bg-grey: var(--sd-grey100); /* 회색 섹션 배경 */ --sd-bg-layered: var(--sd-white); /* 카드·시트 배경 */ --sd-text-title: var(--sd-grey900); /* 제목 */ --sd-text-body: var(--sd-grey800); /* 본문 */ --sd-text-sub: var(--sd-grey700); /* 서브 본문 */ --sd-text-weak: var(--sd-grey600); /* 보조 */ --sd-text-disabled: var(--sd-grey400); /* 비활성·플레이스홀더 */ --sd-primary: var(--sd-blue500); --sd-primary-hover: var(--sd-blue600); --sd-primary-active:var(--sd-blue700); --sd-primary-weak: var(--sd-blue50); /* 연한 액센트 배경 */ --sd-danger: var(--sd-red500); --sd-danger-weak: var(--sd-red50); --sd-success: var(--sd-green500); --sd-success-weak: var(--sd-green50); --sd-warning: var(--sd-orange500); --sd-warning-weak: var(--sd-orange50); --sd-divider: var(--sd-grey200); /* 구분선 */ --sd-divider-weak: var(--sd-grey-op100); /* ---------- 타이포그래피 스케일 (t1~t7) ---------- */ --sd-t1-size: 30px; --sd-t1-lh: 1.333; /* 히어로 제목 */ --sd-t2-size: 26px; --sd-t2-lh: 1.346; /* 대제목 */ --sd-t3-size: 22px; --sd-t3-lh: 1.409; /* 일반 제목 */ --sd-t4-size: 20px; --sd-t4-lh: 1.45; /* 소제목 */ --sd-t5-size: 17px; --sd-t5-lh: 1.5; /* 본문 */ --sd-t6-size: 15px; --sd-t6-lh: 1.5; /* 작은 본문 */ --sd-t7-size: 13px; --sd-t7-lh: 1.5; /* 캡션·보조 */ --sd-weight-bold: 700; --sd-weight-semibold: 600; --sd-weight-medium: 500; --sd-weight-regular: 400; /* ---------- 라운드 ---------- */ --sd-radius-s: 4px; --sd-radius-m: 8px; /* 버튼 large/xlarge, 입력폼 */ --sd-radius-l: 16px; /* 카드 기본 */ --sd-radius-xl: 20px; --sd-radius-xxl: 24px; /* 대형 카드·시트 */ --sd-radius-pill: 100px;/* 배지·칩 */ /* ---------- 그림자 (border 대신 면·그림자로 구분) ---------- */ --sd-shadow-s: 0 0 4px 0 var(--sd-grey-op100), 0 4px 16px 0 var(--sd-grey-op100); --sd-shadow-m: 0 8px 16px 0 var(--sd-grey-op200), 0 4px 8px 0 var(--sd-grey-op100); --sd-shadow-l: 0 24px 40px 0 var(--sd-grey-op50), 0 16px 24px 0 var(--sd-grey-op200), 0 0 8px 0 var(--sd-grey-op100); --sd-focus-ring: inset 0 0 0 2px var(--sd-blue500); --sd-error-ring: inset 0 0 0 2px var(--sd-red400); --sd-input-border: inset 0 0 0 1px var(--sd-grey-op200); /* ---------- 간격 (4px 배수) ---------- */ --sd-space-1: 4px; --sd-space-2: 8px; --sd-space-3: 12px; --sd-space-4: 16px; --sd-space-5: 20px; --sd-space-6: 24px; --sd-space-8: 32px; --sd-space-10: 40px; --sd-space-12: 48px; --sd-space-16: 64px; /* ---------- 모션 ---------- */ --sd-transition-bg: background 0.2s ease, color 0.1s ease; --sd-transition-all: all 0.2s ease; }