/* * Linear 디자인 토큰 * * 출처: linear.app/homepage 시각 분석 * 컨셉: 다크모드 워크플로우 SaaS의 기준. 무채색 절제 + 강한 타이포 위계 * * 활성화: * ⚠️ collaba는 라이트모드 기반이라 다크 적용 시 일부 화면이 어색할 수 있음. * Linear 톤 미리보기 용도. */ @import url("https://rsms.me/inter/inter.css"); [data-brand="linear"], .brand-linear { /* Surface — dark */ --surface-0: #18191a; /* 카드 (bg보다 살짝 밝게) */ --surface-1: #08090a; /* body bg — near-black */ --surface-2: #1f2123; --surface-3: #28282b; --surface-hover: #1f2123; --surface-active: #28282b; --border-subtle: #28282b; /* Text */ --text-primary: #f7f8f8; --text-secondary: #9ca0a8; --text-tertiary: #6f757e; --text-inverse: #08090a; /* Brand */ --primary: #f7f8f8; --primary-hover: #ffffff; --brand-accent: #5e6ad2; /* Linear indigo */ --cta: #5e6ad2; --cta-hover: #6f7adf; /* Status — dark mode tuned */ --destructive: #eb5757; --destructive-light: #2d1414; --destructive-dark: #f87171; --destructive-border: #5a2424; --status-success: #4ade80; --status-success-light: #14271c; --status-success-dark: #86efac; --status-success-border: #2a4a36; --status-warning: #fbbf24; --status-warning-light: #2d2410; --status-warning-dark: #fde047; --status-warning-border: #4a3d1c; --status-info: #60a5fa; --status-info-light: #14213d; --status-info-dark: #93c5fd; --status-info-border: #1e3a5f; /* Radius — Linear는 절제 */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-full: 9999px; /* Shadow — dark mode는 ring 위주 */ --shadow-subtle: 0 0 0 1px rgba(255, 255, 255, 0.04); --shadow-card: 0 0 0 1px rgba(255, 255, 255, 0.06); --shadow-card-hover: 0 0 0 1px rgba(255, 255, 255, 0.10); --shadow-elevated: 0 8px 24px -4px rgba(0, 0, 0, 0.40); --shadow-overlay: 0 16px 48px -8px rgba(0, 0, 0, 0.50); --shadow-toast: 0 16px 48px -8px rgba(0, 0, 0, 0.50); --shadow-dropdown: 0 12px 28px -8px rgba(0, 0, 0, 0.50); --shadow-focus-ring: 0 0 0 3px rgba(94, 106, 210, 0.4); --shadow-cta-ring: 0 0 0 3px rgba(94, 106, 210, 0.35); --shadow-btn: none; --shadow-btn-hover: 0 0 0 1px rgba(255, 255, 255, 0.10); /* Scrollbar */ --scrollbar-thumb: #3a3a3d; --scrollbar-thumb-hover: #4a4a4d; } /* Body 폰트 — Inter primary, 한국어는 Pretendard 폴백 */ [data-brand="linear"] body, .brand-linear body, [data-brand="linear"] { font-family: 'Inter Variable', Inter, 'Pretendard Variable', Pretendard, -apple-system, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif; } /* Display 헤딩 — tight tracking으로 Linear 톤 */ [data-brand="linear"] h1.page-title, [data-brand="linear"] .section-title-xl { letter-spacing: -0.022em; font-weight: 510; }