/* ============================================================ * 오하(오늘하루) — Design Tokens * Wanted Design System 구조 + "Curated Sanctuary" 따뜻한 무드 적응 * Wanted Sans / spacing / radii / soft shadow 계승, * 표면은 크림, 프라이머리는 차분한 블루로 톤 다운. * (웹폰트는 HTML 에서 직접 로드) * ============================================================ */ :root { /* ---- Calm blue (primary) — toned-down from Wanted #0066ff ---- */ --blue-50: #eef4f9; --blue-100: #d9e7f2; --blue-200: #b1d5fb; /* primary_container (brief) */ --blue-300: #8fb4d3; --blue-400: #5f88ac; --blue-500: #3e6282; /* PRIMARY — 차분한 블루 */ --blue-600: #345472; --blue-700: #2a4860; --blue-800: #213a4e; --blue-900: #18293a; /* ---- Warm neutral (workhorse gray, warm-shifted) ---- */ --neutral-99: #faf9f5; /* app background (cream) */ --neutral-98: #f6f5f0; --neutral-96: #f4f4ef; /* section */ --neutral-94: #eeede7; --neutral-90: #e3e2db; --neutral-80: #c8c7bf; --neutral-70: #a8a8a0; --neutral-60: #8a8d86; --neutral-50: #6e716a; --neutral-40: #5d605b; /* secondary text */ --neutral-30: #44473f; --neutral-20: #30332f; /* primary text (warm near-black) */ --neutral-10: #20231f; --neutral-05: #14160f; /* ---- Secondary (community / growth — sage) ---- */ --sage-700: #3f4a39; --sage-600: #4a5642; --sage-500: #57634f; --sage-300: #8c9684; --sage-100: #dfe3d9; --sage-50: #eef0ea; /* ---- Warm accent (peach — selected chips / emphasis) ---- */ --peach-500: #f6c98f; --peach-300: #fbdcae; --peach-200: #feecce; /* tertiary_container */ --peach-50: #fdf6ea; /* ---- Status ---- */ --green-500: #5b8a5e; --green-50: #eaf3ea; --yellow-500: #d9a648; --yellow-50: #fbf3e3; --red-500: #c2615a; --red-50: #f8ebe9; --static-white: #ffffff; --static-black: #000000; /* ---- Alpha (hover / press / glass) ---- */ --alpha-ink-06: rgba(48, 51, 47, 0.06); --alpha-ink-08: rgba(48, 51, 47, 0.08); --alpha-ink-12: rgba(48, 51, 47, 0.12); --alpha-ink-15: rgba(48, 51, 47, 0.15); --alpha-primary-08: rgba(62, 98, 130, 0.08); --alpha-primary-14: rgba(62, 98, 130, 0.14); --glass-cream: rgba(250, 249, 245, 0.72); --glass-white: rgba(255, 255, 255, 0.66); /* ============================================================ * SEMANTIC * ============================================================ */ --surface-background: #faf9f5; --surface-background-alt: var(--neutral-96); --surface-section: var(--neutral-96); --surface-elevated: #ffffff; --surface-overlay: rgba(32, 35, 31, 0.44); --surface-inverse: var(--neutral-20); --fg-primary: var(--neutral-20); --fg-secondary: var(--neutral-40); --fg-tertiary: var(--neutral-60); --fg-disabled: var(--neutral-70); --fg-on-primary: #ffffff; --fg-link: var(--blue-500); --brand-primary: var(--blue-500); --brand-primary-hover: var(--blue-600); --brand-primary-press: var(--blue-700); --brand-primary-soft: var(--blue-50); --brand-container: var(--blue-200); --secondary: var(--sage-500); --secondary-hover: var(--sage-600); --secondary-soft: var(--sage-50); --secondary-container: var(--sage-100); --accent-warm: var(--peach-200); --accent-warm-soft: var(--peach-50); --accent-warm-line: var(--peach-500); --status-success: var(--green-500); --status-success-soft: var(--green-50); --status-warn: var(--yellow-500); --status-warn-soft: var(--yellow-50); --status-danger: var(--red-500); --status-danger-soft: var(--red-50); --status-info: var(--blue-500); --status-info-soft: var(--blue-50); /* 무테두리 원칙: 경계는 톤 차이로. 꼭 필요하면 outline 15% 이하 */ --border-hairline: rgba(48, 51, 47, 0.07); --border-subtle: rgba(48, 51, 47, 0.10); --border-focus: var(--blue-500); --interaction-hover: var(--alpha-ink-06); --interaction-press: var(--alpha-ink-12); /* ---- Type ---- */ --font-sans: "Wanted Sans Variable", "Wanted Sans", "Pretendard JP", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; --weight-black: 900; --t-display-size: 52px; --t-display-lh: 1.18; --t-title-1-size: 36px; --t-title-1-lh: 1.28; --t-title-2-size: 28px; --t-title-2-lh: 1.32; --t-title-3-size: 22px; --t-title-3-lh: 1.45; --t-heading-1-size: 20px; --t-heading-1-lh: 1.5; --t-heading-2-size: 18px; --t-heading-2-lh: 1.5; --t-body-1-size: 16px; --t-body-1-lh: 1.65; /* 한글 숨쉬는 행간 */ --t-body-2-size: 15px; --t-body-2-lh: 1.65; --t-body-3-size: 14px; --t-body-3-lh: 1.6; --t-caption-1-size: 13px; --t-caption-1-lh: 1.5; --t-caption-2-size: 12px; --t-caption-2-lh: 1.5; --tracking-tight: -0.018em; --tracking-snug: -0.01em; --tracking-normal: 0; --tracking-loose: 0.01em; /* ---- Spacing (4px grid) ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* ---- Radius ---- */ --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px; --radius-card: 16px; --radius-lg: 20px; --radius-xl: 28px; --radius-hero: 40px; --radius-pill: 999px; /* ---- Elevation: 분위기 그림자 ---- */ --shadow-1: 0 1px 2px rgba(48,51,47,.04); --shadow-2: 0 6px 16px rgba(48,51,47,.05); --shadow-3: 0 14px 30px rgba(48,51,47,.06); --shadow-4: 0 20px 40px rgba(48,51,47,.06); --shadow-float: 0 24px 60px rgba(48,51,47,.12); --motion-fast: 120ms cubic-bezier(0.2,0.8,0.2,1); --motion-medium: 220ms cubic-bezier(0.2,0.8,0.2,1); --motion-slow: 360ms cubic-bezier(0.2,0.8,0.2,1); } /* ============================================================ * BASE * ============================================================ */ * { box-sizing: border-box; } html { font-family: var(--font-sans); color: var(--fg-primary); background: var(--surface-background); font-feature-settings: "ss03", "case", "tnum"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { margin: 0; font-size: var(--t-body-1-size); line-height: var(--t-body-1-lh); } h1,h2,h3,h4,h5,p { margin: 0; } .t-display { font-size: var(--t-display-size); line-height: var(--t-display-lh); font-weight: var(--weight-extrabold); letter-spacing: var(--tracking-tight); } .t-title-1 { font-size: var(--t-title-1-size); line-height: var(--t-title-1-lh); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); } .t-title-2 { font-size: var(--t-title-2-size); line-height: var(--t-title-2-lh); font-weight: var(--weight-bold); letter-spacing: var(--tracking-snug); } .t-title-3 { font-size: var(--t-title-3-size); line-height: var(--t-title-3-lh); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-snug); } .t-heading-1{ font-size: var(--t-heading-1-size); line-height: var(--t-heading-1-lh); font-weight: var(--weight-semibold); } .t-heading-2{ font-size: var(--t-heading-2-size); line-height: var(--t-heading-2-lh); font-weight: var(--weight-semibold); } .t-body-1 { font-size: var(--t-body-1-size); line-height: var(--t-body-1-lh); font-weight: var(--weight-regular); } .t-body-2 { font-size: var(--t-body-2-size); line-height: var(--t-body-2-lh); font-weight: var(--weight-regular); } .t-body-3 { font-size: var(--t-body-3-size); line-height: var(--t-body-3-lh); font-weight: var(--weight-regular); } .t-caption-1{ font-size: var(--t-caption-1-size); line-height: var(--t-caption-1-lh); font-weight: var(--weight-regular); } .t-caption-2{ font-size: var(--t-caption-2-size); line-height: var(--t-caption-2-lh); font-weight: var(--weight-regular); } .t-label { font-size: var(--t-body-3-size); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-loose); } .fg-secondary { color: var(--fg-secondary); } .fg-tertiary { color: var(--fg-tertiary); } button { font-family: inherit; cursor: pointer; } ::selection { background: var(--peach-200); color: var(--neutral-20); } /* Focus ring — 접근성 */ :focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: var(--radius-xs); } /* Custom scrollbars inside the prototype */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--alpha-ink-12); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--alpha-ink-15); background-clip: padding-box; }