/* ============================================================ Checkpointer Design System — Tokens ------------------------------------------------------------ Foundations derived from the Wanted Design System (Pretendard JP + 18-step typography ladder + atomic palette). Checkpointer is the brand layer on top — indigo primary, completion-green accent. ============================================================ */ /* --- Fonts ------------------------------------------------- */ /* Pretendard is self-hosted from /fonts/ (subset .woff covers Latin + Hangul). For Japanese glyphs, swap in the Pretendard JP .woff2 build — see /fonts/README.md. */ @font-face { font-family: 'Pretendard'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/Pretendard-Light.subset.woff') format('woff'); } @font-face { font-family: 'Pretendard'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Pretendard-Regular.subset.woff') format('woff'); } @font-face { font-family: 'Pretendard'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/Pretendard-Medium.subset.woff') format('woff'); } @font-face { font-family: 'Pretendard'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/Pretendard-SemiBold.subset.woff') format('woff'); } @font-face { font-family: 'Pretendard'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/Pretendard-Bold.subset.woff') format('woff'); } :root { /* === Atomic palette ===================================== These are the raw color stops (Wanted's atomic scale). Prefer the semantic tokens below for actual UI work. */ /* Common */ --c-common-0: #000000; --c-common-100: #FFFFFF; /* Neutrals (cool grey, 13 steps) */ --c-neutral-50: #F7F7F8; --c-neutral-75: #F4F4F5; --c-neutral-100: #EAEBEC; --c-neutral-150: #E1E2E4; --c-neutral-200: #DBDCDF; --c-neutral-300: #C2C4C8; --c-neutral-400: #AEB0B6; --c-neutral-500: #989BA2; --c-neutral-600: #878A93; --c-neutral-700: #70737C; --c-neutral-800: #5A5C63; --c-neutral-900: #46474C; --c-neutral-950: #37383C; --c-neutral-975: #2E2F33; --c-neutral-1000:#1B1C1E; --c-neutral-1050:#171719; /* Brand — Indigo (Checkpointer primary) */ --c-indigo-50: #FBFAFF; --c-indigo-100: #F0ECFE; --c-indigo-200: #DBD3FE; --c-indigo-300: #C0B0FF; --c-indigo-400: #9E86FC; --c-indigo-500: #7D5EF7; --c-indigo-600: #6541F2; --c-indigo-700: #5B37ED; /* primary */ --c-indigo-800: #4F29E5; --c-indigo-900: #3A16C9; --c-indigo-950: #23098F; /* Blue (informational / links) */ --c-blue-50: #F7FBFF; --c-blue-100: #EAF2FE; --c-blue-200: #C9DEFE; --c-blue-400: #69A5FF; --c-blue-500: #3385FF; --c-blue-600: #0066FF; --c-blue-700: #005EEB; --c-blue-800: #0054D1; /* Green (success / "checked") */ --c-green-50: #F2FFF6; --c-green-100: #D9FFE6; --c-green-200: #ACFCC7; --c-green-400: #49E57D; --c-green-500: #1ED45A; --c-green-600: #00BF40; /* completion green */ --c-green-700: #009632; --c-green-800: #006E25; /* Red (error / destructive) */ --c-red-50: #FFFAFA; --c-red-100: #FEECEC; --c-red-200: #FED5D5; --c-red-400: #FF8C8C; --c-red-500: #FF6363; --c-red-600: #FF4242; --c-red-700: #E52222; --c-red-800: #B20C0C; /* Orange (warning) */ --c-orange-100: #FEF4E6; --c-orange-400: #FFC06E; --c-orange-600: #FF9200; --c-orange-700: #D47800; /* Cyan (accent / info chips) */ --c-cyan-100: #DEFAFF; --c-cyan-500: #28D0ED; --c-cyan-600: #00BDDE; --c-cyan-700: #0098B2; /* === Semantic tokens — LIGHT ============================ */ /* Surface / background */ --bg-canvas: var(--c-common-100); /* page */ --bg-elevated: var(--c-common-100); /* cards, sheets */ --bg-subtle: var(--c-neutral-50); /* shaded sections */ --bg-muted: var(--c-neutral-75); /* inputs, code blocks */ --bg-overlay: rgba(0, 0, 0, 0.50); /* modal scrim */ --bg-inverse: var(--c-neutral-1050); /* dark surfaces in light mode */ /* Foreground / text */ --fg-strong: var(--c-neutral-1050); /* #171719 primary text */ --fg-default: rgba(46, 47, 51, 0.88);/* body text */ --fg-muted: rgba(55, 56, 60, 0.61);/* secondary captions */ --fg-subtle: rgba(55, 56, 60, 0.43);/* tertiary hints */ --fg-disabled: rgba(55, 56, 60, 0.28); --fg-on-brand: var(--c-common-100); --fg-inverse: var(--c-common-100); /* Border / divider */ --border-default: rgba(112, 115, 124, 0.22); --border-strong: rgba(112, 115, 124, 0.40); --border-subtle: rgba(112, 115, 124, 0.12); --border-inverse: var(--c-neutral-1050); /* Brand — primary action / focus */ --brand: var(--c-indigo-700); /* #5B37ED */ --brand-hover: var(--c-indigo-800); --brand-press: var(--c-indigo-900); --brand-soft: var(--c-indigo-100); --brand-soft-hover: var(--c-indigo-200); --brand-on: var(--c-common-100); --brand-fg: var(--c-indigo-700); /* tinted text */ /* Status */ --success: var(--c-green-600); --success-soft: var(--c-green-100); --success-fg: var(--c-green-700); --warning: var(--c-orange-600); --warning-soft: var(--c-orange-100); --warning-fg: var(--c-orange-700); --danger: var(--c-red-600); --danger-soft: var(--c-red-100); --danger-fg: var(--c-red-700); --info: var(--c-blue-600); --info-soft: var(--c-blue-100); --info-fg: var(--c-blue-700); /* === Typography ========================================= */ --font-sans: 'Pretendard JP', 'Pretendard', 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', 'Menlo', monospace; /* Weight tokens (Pretendard supports 100-900) */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* === Spacing (Wanted 4pt scale) ========================= */ --space-0: 0; --space-1: 2px; --space-2: 4px; --space-3: 6px; --space-4: 8px; --space-5: 10px; --space-6: 12px; --space-7: 14px; --space-8: 16px; --space-10: 20px; --space-12: 24px; --space-16: 32px; --space-20: 40px; --space-24: 48px; --space-32: 64px; --space-40: 80px; --space-48: 96px; --space-64: 128px; /* === Radii ============================================== */ --radius-2: 2px; --radius-4: 4px; --radius-6: 6px; --radius-8: 8px; --radius-12: 12px; --radius-16: 16px; --radius-20: 20px; --radius-24: 24px; --radius-32: 32px; --radius-pill: 9999px; /* === Shadows (Wanted-style soft elevation) ============== */ --shadow-1: 0 1px 2px rgba(23, 23, 23, 0.06), 0 1px 1px rgba(23, 23, 23, 0.04); --shadow-2: 0 2px 4px rgba(23, 23, 23, 0.07), 0 1px 2px rgba(23, 23, 23, 0.04); --shadow-3: 0 6px 16px rgba(23, 23, 23, 0.08), 0 2px 4px rgba(23, 23, 23, 0.04); --shadow-4: 0 12px 32px rgba(23, 23, 23, 0.10), 0 4px 8px rgba(23, 23, 23, 0.06); --shadow-5: 0 24px 56px rgba(23, 23, 23, 0.12), 0 8px 16px rgba(23, 23, 23, 0.08); --shadow-focus: 0 0 0 4px rgba(91, 55, 237, 0.20); /* === Motion ============================================ */ --ease-out: cubic-bezier(0.16, 1, 0.30, 1); /* primary "snap" */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; /* === Layout ============================================ */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --container-2xl: 1392px; } /* === Dark theme =========================================== */ [data-theme="dark"], .theme-dark { --bg-canvas: var(--c-neutral-1050); --bg-elevated: var(--c-neutral-1000); --bg-subtle: var(--c-neutral-975); --bg-muted: var(--c-neutral-950); --bg-overlay: rgba(0, 0, 0, 0.70); --bg-inverse: var(--c-common-100); --fg-strong: #FAFAFB; --fg-default: rgba(246, 247, 249, 0.88); --fg-muted: rgba(220, 224, 232, 0.61); --fg-subtle: rgba(220, 224, 232, 0.43); --fg-disabled: rgba(220, 224, 232, 0.28); --fg-inverse: var(--c-neutral-1050); --border-default: rgba(200, 202, 209, 0.16); --border-strong: rgba(200, 202, 209, 0.32); --border-subtle: rgba(200, 202, 209, 0.08); --brand: var(--c-indigo-500); /* lighten for dark */ --brand-hover: var(--c-indigo-400); --brand-press: var(--c-indigo-300); --brand-soft: rgba(125, 94, 247, 0.18); --brand-fg: var(--c-indigo-300); --success: var(--c-green-500); --success-soft: rgba(30, 212, 90, 0.16); --success-fg: var(--c-green-400); --warning-soft: rgba(255, 146, 0, 0.16); --danger-soft: rgba(255, 66, 66, 0.16); --info-soft: rgba(0, 102, 255, 0.16); } /* === Type roles =========================================== */ /* Wanted's 18-step ladder, mapped to semantic names. Use these in class attributes (e.g.

) — they apply size, weight, line-height, letter-spacing in one shot. */ .cp-display-1 { font: var(--fw-bold) 56px/1.250 var(--font-sans); letter-spacing: -0.017em; } .cp-display-2 { font: var(--fw-bold) 40px/1.300 var(--font-sans); letter-spacing: -0.0282em; } .cp-display-3 { font: var(--fw-bold) 36px/1.334 var(--font-sans); letter-spacing: -0.027em; } .cp-title-1 { font: var(--fw-bold) 32px/1.375 var(--font-sans); letter-spacing: -0.0253em; } .cp-title-2 { font: var(--fw-bold) 28px/1.358 var(--font-sans); letter-spacing: -0.0236em; } .cp-title-3 { font: var(--fw-bold) 24px/1.334 var(--font-sans); letter-spacing: -0.023em; } .cp-heading-1 { font: var(--fw-semibold) 22px/1.364 var(--font-sans); letter-spacing: -0.0194em; } .cp-heading-2 { font: var(--fw-semibold) 20px/1.400 var(--font-sans); letter-spacing: -0.012em; } .cp-headline-1{ font: var(--fw-semibold) 18px/1.445 var(--font-sans); letter-spacing: -0.002em; } .cp-headline-2{ font: var(--fw-semibold) 17px/1.412 var(--font-sans); letter-spacing: 0em; } .cp-body-1 { font: var(--fw-medium) 16px/1.500 var(--font-sans); letter-spacing: 0.0057em; } .cp-body-1r { font: var(--fw-medium) 16px/1.625 var(--font-sans); letter-spacing: 0.0057em; } .cp-body-2 { font: var(--fw-medium) 15px/1.467 var(--font-sans); letter-spacing: 0.0096em; } .cp-body-2r { font: var(--fw-medium) 15px/1.600 var(--font-sans); letter-spacing: 0.0096em; } .cp-label-1 { font: var(--fw-semibold) 14px/1.429 var(--font-sans); letter-spacing: 0.0145em; } .cp-label-1r { font: var(--fw-medium) 14px/1.571 var(--font-sans); letter-spacing: 0.0145em; } .cp-label-2 { font: var(--fw-semibold) 13px/1.385 var(--font-sans); letter-spacing: 0.0194em; } .cp-caption-1 { font: var(--fw-medium) 12px/1.334 var(--font-sans); letter-spacing: 0.0252em; } .cp-caption-2 { font: var(--fw-medium) 11px/1.273 var(--font-sans); letter-spacing: 0.0311em; } .cp-mono { font: var(--fw-medium) 14px/1.500 var(--font-mono); letter-spacing: 0; } /* === Element defaults ===================================== */ html, body { font-family: var(--font-sans); font-size: 16px; color: var(--fg-strong); background: var(--bg-canvas); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1 { font: var(--fw-bold) 32px/1.375 var(--font-sans); letter-spacing: -0.0253em; } h2 { font: var(--fw-bold) 24px/1.334 var(--font-sans); letter-spacing: -0.023em; } h3 { font: var(--fw-semibold) 20px/1.400 var(--font-sans); letter-spacing: -0.012em; } h4 { font: var(--fw-semibold) 17px/1.412 var(--font-sans); letter-spacing: 0em; } p, li { font: var(--fw-medium) 16px/1.625 var(--font-sans); letter-spacing: 0.0057em; color: var(--fg-default); } code, kbd, samp { font-family: var(--font-mono); font-size: 0.9em; } small { font: var(--fw-medium) 12px/1.334 var(--font-sans); letter-spacing: 0.0252em; color: var(--fg-muted); } a { color: var(--brand-fg); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 2px; } ::selection { background: var(--brand-soft); color: var(--brand); }