/* * Notion 디자인 토큰 * * 출처: notion.com/ko 시각 분석 * 컨셉: 따뜻한 off-white + 진한 brown-black 텍스트 + 절제된 indigo accent * * 활성화: */ [data-brand="notion"], .brand-notion { /* Surface — 따뜻한 off-white 톤 */ --surface-0: #ffffff; --surface-1: #f7f6f3; /* Notion signature warm cream */ --surface-2: #efeeec; --surface-3: #e9e8e6; --surface-hover: #f1f1ef; --surface-active: #e9e8e6; --border-subtle: #ecebe9; /* Text — warm dark */ --text-primary: #37352f; --text-secondary: #787774; --text-tertiary: #9b9a97; --text-inverse: #ffffff; /* Brand */ --primary: #37352f; --primary-hover: #2f2d28; --brand-accent: #455dd3; /* Notion indigo */ --cta: #455dd3; --cta-hover: #3a4fb0; /* Status */ --destructive: #e03e3e; --destructive-light: #fbe4e4; --destructive-dark: #b73c3c; --destructive-border: #f3c5c5; --status-success: #448361; --status-success-light: #ddedd1; --status-success-dark: #386142; --status-success-border: #b4d8b1; --status-warning: #d9730d; --status-warning-light: #fadec9; --status-warning-dark: #b25a06; --status-warning-border: #f3c89c; --status-info: #455dd3; --status-info-light: #dfe2f7; --status-info-dark: #3a4fb0; --status-info-border: #c1c8eb; /* Radius — Notion은 tight */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-full: 9999px; /* Shadow — 매우 절제 */ --shadow-subtle: 0 1px 2px rgba(15, 15, 15, 0.05); --shadow-card: 0 1px 3px rgba(15, 15, 15, 0.06); --shadow-card-hover: 0 4px 12px -2px rgba(15, 15, 15, 0.08); --shadow-elevated: 0 8px 24px -4px rgba(15, 15, 15, 0.12); --shadow-overlay: 0 16px 48px -8px rgba(15, 15, 15, 0.18); --shadow-toast: 0 12px 32px -8px rgba(15, 15, 15, 0.16); --shadow-dropdown: 0 8px 24px -4px rgba(15, 15, 15, 0.14); --shadow-focus-ring: 0 0 0 3px rgba(69, 93, 211, 0.20); --shadow-cta-ring: 0 0 0 3px rgba(69, 93, 211, 0.25); --shadow-btn: 0 1px 2px rgba(15, 15, 15, 0.10); --shadow-btn-hover: 0 2px 6px rgba(15, 15, 15, 0.14); } /* Body 폰트 — Inter primary (NotionInter ≈ Inter), Pretendard 한국어 폴백 */ [data-brand="notion"] body, .brand-notion body, [data-brand="notion"] { font-family: 'Inter Variable', Inter, 'Pretendard Variable', Pretendard, -apple-system, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif; }