/* ═══════════════════════════════════════════════════════════════ 삼우물산 OPS 디자인 토큰 — Apple / SpaceX / Tesla 결 ───────────────────────────────────────────────────────────── 원칙 1. 라이트 베이스 (FAFAFA → FFFFFF) 가 기본. 다크는 옵션. 2. 컬러는 거의 흑백. 액센트 1색 + 상태 4색만. 3. 1 px 헤어라인 만. 두꺼운 보더, 컬러 보더 안 씀. 4. 큰 숫자 + 작은 라벨. KPI 는 Pretendard 900 으로. 5. 간격: 안 빡빡, 밖 시원. 컴포넌트 내부는 타이트, 그룹 사이는 시원. 6. 색만으로 상태 구분하지 않음. 점·기호·위치도 같이. ═══════════════════════════════════════════════════════════════ */ /* 폰트는 같은 디렉토리의 colors_and_type.css에서 로드됨. */ @import url('./colors_and_type.css'); :root { /* ── Neutral scale (10 stops) ──────────────────── */ --n-0: #FFFFFF; /* white card */ --n-50: #FAFAFA; /* page bg */ --n-100: #F4F4F5; /* hover bg */ --n-200: #E4E4E7; /* hairline divider */ --n-300: #D4D4D8; /* disabled border */ --n-400: #A1A1AA; /* placeholder text */ --n-500: #71717A; /* secondary text */ --n-600: #52525B; /* tertiary text on dark */ --n-700: #3F3F46; /* body text on dark */ --n-800: #27272A; /* heading text on dark */ --n-900: #18181B; /* primary text */ --n-950: #09090B; /* near-black for displays */ /* ── Surface roles (light mode default) ───────── */ --surface: var(--n-50); /* page background */ --surface-card: var(--n-0); /* elevated card */ --surface-sunk: var(--n-100); /* hover / sub-panel */ --hairline: var(--n-200); /* 1 px divider */ --hairline-soft: var(--n-100); /* even softer */ --text-1: var(--n-950); /* primary copy */ --text-2: var(--n-700); /* secondary */ --text-3: var(--n-500); /* tertiary / meta */ --text-4: var(--n-400); /* placeholder */ --text-inverse: var(--n-0); /* ── Accent — exposed as 3 themes. Default = blue. ─────────── */ /* Apply .theme-blue / .theme-crimson / .theme-amber on to switch the entire surface's accent. Each theme overrides these three vars. */ --accent: #0A84FF; /* System Blue · default */ --accent-fg: #FFFFFF; /* readable text on accent */ --accent-soft: #DCEEFF; /* tinted surface */ --accent-deep: #0064D2; /* hover / pressed */ /* ── Status palette (always the same regardless of accent) ─── */ /* These four states use SHAPE + ICON + COLOR — never colour alone. */ --st-urgent: #E11D2A; /* hot red, 긴급 */ --st-urgent-bg: #FEE7E9; --st-todo: #B45309; /* deep amber, 할 일 — distinct from accent-amber */ --st-todo-bg: #FEF3C7; --st-progress: #0A84FF; /* blue, 진행 */ --st-progress-bg: #DCEEFF; --st-done: #15803D; /* forest green, 완료 */ --st-done-bg: #DCFCE7; --st-info: var(--n-700); /* neutral grey, 정보 */ --st-info-bg: var(--n-100); /* ── Spacing (8 pt grid) ────────────────────────── */ --s-0: 0; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 48px; --s-10: 64px; --s-11: 80px; --s-12: 96px; --s-13: 128px; /* ── Radii — sharp, never pillowy ────────────────── */ --r-1: 2px; --r-2: 4px; /* default for buttons, inputs */ --r-3: 6px; --r-4: 8px; /* cards */ --r-5: 10px; /* large containers */ --r-pill: 999px; /* status chips only */ /* ── Hairlines (1 px borders) ────────────────────── */ --bd: 1px solid var(--hairline); --bd-soft: 1px solid var(--hairline-soft); --bd-dashed: 1px dashed var(--hairline); /* ── Shadows — very subtle, almost imperceptible ── */ --shadow-1: 0 1px 2px rgba(9, 9, 11, 0.04); /* row hover */ --shadow-2: 0 1px 3px rgba(9, 9, 11, 0.06), 0 1px 2px rgba(9, 9, 11, 0.04); /* card rest */ --shadow-3: 0 4px 12px rgba(9, 9, 11, 0.08), 0 2px 4px rgba(9, 9, 11, 0.04);/* card hover / menu */ --shadow-4: 0 12px 32px rgba(9, 9, 11, 0.14), 0 4px 8px rgba(9, 9, 11, 0.04);/* modal */ /* ── Motion ──────────────────────────────────────── */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --t-fast: 100ms; --t-base: 180ms; --t-slow: 260ms; /* ── Type scale ─────────────────────────────────── */ /* We aggressively use weight contrast (300 ↔ 900) and size contrast (label 11 ↔ display 64) — the Apple Numbers / Tesla approach. */ --fs-10: 10px; --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-15: 15px; --fs-16: 16px; --fs-18: 18px; --fs-20: 20px; --fs-24: 24px; --fs-28: 28px; --fs-32: 32px; --fs-40: 40px; --fs-48: 48px; --fs-56: 56px; --fs-64: 64px; --fs-80: 80px; --lh-tight: 1.05; --lh-snug: 1.25; --lh-normal: 1.50; /* ── Type families (rely on Pretendard from parent css) ────── */ --font-ui: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif; --font-display: 'Pretendard', -apple-system, sans-serif; --font-numeric: 'Rajdhani', 'Pretendard', sans-serif; /* tabular numerals, KPI */ --font-mono: 'JetBrains Mono', ui-monospace, monospace; } /* ── Theme variants — set on ──────────────── */ body.theme-blue { --accent: #0A84FF; --accent-soft: #DCEEFF; --accent-deep: #0064D2; } body.theme-crimson { --accent: #D9342F; --accent-soft: #FCE3E1; --accent-deep: #B7241E; } body.theme-amber { --accent: #B45309; /* deeper than the status-todo amber for hierarchy */ --accent-soft: #FEF3C7; --accent-deep: #92400E; } /* ── Optional dark mode (apply .dark on ) ───── */ /* Graphite, NOT pure black. Soft surfaces, off-white text. */ body.dark { --surface: #161618; /* graphite page */ --surface-card: #1F1F23; /* card */ --surface-sunk: #28282E; /* hover / sub-panel */ --hairline: #33333A; /* 1 px divider */ --hairline-soft: #28282E; --text-1: #F0F0F2; /* primary, slightly off-white */ --text-2: #BCBCC4; --text-3: #85858E; --text-4: #5A5A64; --text-inverse: #18181B; /* Status backgrounds on dark = translucent tints (not pastels) */ --st-urgent-bg: rgba(225, 29, 42, 0.16); --st-todo-bg: rgba(180, 83, 9, 0.18); --st-progress-bg: rgba( 10, 132, 255, 0.16); --st-done-bg: rgba( 21, 128, 61, 0.20); --st-info-bg: rgba(255, 255, 255, 0.06); --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-2: 0 1px 3px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.20); --shadow-3: 0 4px 12px rgba(0, 0, 0, 0.50), 0 2px 4px rgba(0, 0, 0, 0.20); --shadow-4: 0 12px 32px rgba(0, 0, 0, 0.60), 0 4px 8px rgba(0, 0, 0, 0.20); } /* Per-theme overrides on dark = bump accents brighter so they read on graphite */ body.dark.theme-blue { --accent: #4DA3FF; --accent-soft: rgba( 77, 163, 255, 0.16); --accent-deep: #1A88F7; } body.dark.theme-crimson { --accent: #F25C57; --accent-soft: rgba(242, 92, 87, 0.16); --accent-deep: #D9342F; } body.dark.theme-amber { --accent: #F59E0B; /* brighter than light-mode #B45309 */ --accent-soft: rgba(245, 158, 11, 0.16); --accent-deep: #D97706; }