/* ============================================================ MOPS · Design Tokens 개발자 도구 · NMS 관제 대시보드 통합 디자인 시스템 ------------------------------------------------------------ - 프레임워크 0 · 빌드 0. 이 파일 하나가 토큰의 단일 소스입니다. - 다크가 기본값(:root). 테마 전환은 . - 밀도(관제/개발자 모드)는 루트에 --u(여백)·--f(글자) 값만 주입. - 글래스는 --surface-glass; 배경 없는 영역은 조상에 data-bg="off". ============================================================ */ :root { /* ── Primary · Blue scale (50–900, 기준 blue-600 = #2563eb) ── */ --blue-50:#eff6ff; --blue-100:#dbeafe; --blue-200:#bfdbfe; --blue-300:#93c5fd; --blue-400:#60a5fa; --blue-500:#3b82f6; --blue-600:#2563eb; --blue-700:#1d4ed8; --blue-800:#1e40af; --blue-900:#1e3a8a; /* ── Neutral · Gray scale (slate 계열) ── */ --gray-50:#f8fafc; --gray-100:#f1f5f9; --gray-200:#e2e8f0; --gray-300:#cbd5e1; --gray-400:#94a3b8; --gray-500:#64748b; --gray-600:#475569; --gray-700:#334155; --gray-800:#1e293b; --gray-900:#0f172a; /* ── Status (노드 상태 매핑: up/warning/down/unknown) ── */ --success:#16a34a; --warning:#f59e0b; --error:#dc2626; --info:#0ea5e9; /* ── Type ── */ --font-sans:"Pretendard Variable", Pretendard, -apple-system, system-ui, sans-serif; --font-mono:"JetBrains Mono", "Pretendard Variable", ui-monospace, "SF Mono", monospace; --tracking-tight:-0.025em; --tracking-body:-0.01em; /* ── Spacing (4pt scale) ── */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px; /* ── Radius ── */ --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-pill:999px; /* ── Blur ── */ --blur-glass:7px; /* ── Motion ── */ --ease-out:cubic-bezier(0.22,0.61,0.36,1); --dur:180ms; /* ── Density multipliers (런타임 조정) ── 관제/개발자 모드: --u:0.66; --f:0.86; 일반: --u:1; --f:1; */ --u:1; --f:1; /* ══ Semantic surface tokens — DARK 이 기본값 ══ */ --bg:#0a0f1a; --bg-sunken:#070b13; --surface:#111827; --surface-2:#151e30; --surface-glass:rgba(17,24,39,0.55); --surface-glass-border:rgba(148,163,184,0.14); --border:#1f2a3c; --border-strong:#2b3a52; --fg:#e8eef7; --fg-muted:#9fb0c6; --fg-subtle:#617087; --accent:#3b82f6; --accent-strong:#2563eb; --accent-hover:#60a5fa; --accent-fg:#ffffff; --accent-soft:rgba(37,99,235,0.16); --shadow-xs:0 1px 2px rgba(0,0,0,0.45); --shadow-sm:0 1px 2px rgba(0,0,0,0.35), 0 3px 10px rgba(0,0,0,0.28); --shadow-md:0 6px 22px rgba(0,0,0,0.45); --shadow-lg:0 16px 48px rgba(0,0,0,0.6); --shadow-glow:0 0 0 1px rgba(59,130,246,0.45), 0 8px 28px rgba(37,99,235,0.4); } /* ══ DARK (명시적 토글 — :root 기본값과 동일) ══ */ [data-theme="dark"] { --bg:#0a0f1a; --bg-sunken:#070b13; --surface:#111827; --surface-2:#151e30; --surface-glass:rgba(17,24,39,0.55); --surface-glass-border:rgba(148,163,184,0.14); --border:#1f2a3c; --border-strong:#2b3a52; --fg:#e8eef7; --fg-muted:#9fb0c6; --fg-subtle:#617087; --accent:#3b82f6; --accent-strong:#2563eb; --accent-hover:#60a5fa; --accent-fg:#ffffff; --accent-soft:rgba(37,99,235,0.16); --shadow-xs:0 1px 2px rgba(0,0,0,0.45); --shadow-sm:0 1px 2px rgba(0,0,0,0.35), 0 3px 10px rgba(0,0,0,0.28); --shadow-md:0 6px 22px rgba(0,0,0,0.45); --shadow-lg:0 16px 48px rgba(0,0,0,0.6); --shadow-glow:0 0 0 1px rgba(59,130,246,0.45), 0 8px 28px rgba(37,99,235,0.4); } /* ══ LIGHT ══ */ [data-theme="light"] { --bg:#f1f5f9; --bg-sunken:#e8eef5; --surface:#ffffff; --surface-2:#f8fafc; --surface-glass:rgba(255,255,255,0.62); --surface-glass-border:rgba(15,23,42,0.1); --border:#e2e8f0; --border-strong:#cbd5e1; --fg:#0f172a; --fg-muted:#475569; --fg-subtle:#94a3b8; --accent:#2563eb; --accent-strong:#1d4ed8; --accent-hover:#1d4ed8; --accent-fg:#ffffff; --accent-soft:rgba(37,99,235,0.1); --shadow-xs:0 1px 2px rgba(15,23,42,0.06); --shadow-sm:0 1px 2px rgba(15,23,42,0.06), 0 3px 10px rgba(15,23,42,0.06); --shadow-md:0 8px 24px rgba(15,23,42,0.1); --shadow-lg:0 20px 52px rgba(15,23,42,0.16); --shadow-glow:0 0 0 1px rgba(37,99,235,0.35), 0 10px 30px rgba(37,99,235,0.22); } /* ══ Glass token split — 배경 이미지를 제거하면 토큰만 solid 로 스왑 ══ */ [data-bg="off"] { --surface-glass:var(--surface); --surface-glass-border:var(--border); --blur-glass:0px; } /* ── Keyframes (컴포넌트에서 참조) ── */ @keyframes mops-fade-up { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } } @keyframes mops-pulse { 0%,100% { opacity:1; } 50% { opacity:0.35; } }