/* ========================================================================== Mimolux Design System — Design Tokens 모든 값은 여기서만 정의합니다. 컴포넌트에 hex 를 직접 쓰지 마세요. Prefix: --mml- ========================================================================== */ :root { /* ── Color · Ink (행동/텍스트) ───────────────────────────────────── */ --mml-ink: #0b0c0e; /* 디스플레이 · 1차 텍스트 */ --mml-primary: #1a1c20; /* Primary CTA 필 배경 */ --mml-primary-active: #08090b; /* Press 상태 */ --mml-body: #4b4f55; /* 본문 기본 */ --mml-body-strong: #1a1c20; /* 본문 강조 */ --mml-muted: #74787f; /* 부제 · 캡션 */ --mml-muted-soft: #a1a5ac; /* 비활성 텍스트 */ --mml-on-primary: #ffffff; /* Ink 필 위 텍스트 */ /* ── Color · Surface (Daylight 모드) ─────────────────────────────── */ --mml-canvas: #f4f4f5; /* 페이지 바닥 */ --mml-canvas-soft: #fafafa; /* 교차 섹션용 밝은 밴드 */ --mml-surface-card: #ffffff; /* 카드 */ --mml-surface-strong: #ecedee; /* 배지 · 아이콘 플레이트 */ /* ── Color · Stage (Dark 모드 — LED 제품 연출면) ─────────────────── */ --mml-stage: #08090b; /* Stage 바닥 */ --mml-stage-elevated: #14161a; /* Stage 위 카드 */ --mml-stage-soft: #1d2026; /* Stage 위 배지 · 플레이트 */ --mml-on-stage: #ffffff; /* Stage 위 1차 텍스트 */ --mml-on-stage-body: #c9ccd2; /* Stage 위 본문 */ --mml-on-stage-soft: #8b9098; /* Stage 위 부제 */ /* ── Color · Hairline ───────────────────────────────────────────── */ --mml-hairline: #e4e4e7; /* 기본 1px 구분선 */ --mml-hairline-soft: #efeff1; /* 더 옅은 구분선 */ --mml-hairline-strong: #d2d4d8; /* 패널 · 인풋 외곽선 */ --mml-hairline-stage: rgba(255, 255, 255, 0.10); --mml-hairline-stage-strong: rgba(255, 255, 255, 0.18); /* ── Color · Luminance Spectrum (시그니처 · 장식 전용) ─────────── Daylight 위: 부드러운 파스텔 블룸. 버튼 채움 · 텍스트 컬러로 절대 사용하지 않습니다. */ --mml-lum-cyan: #9be3dc; --mml-lum-azure: #a6c8f2; --mml-lum-violet: #c4b5f0; --mml-lum-amber: #f7d6a8; --mml-lum-rose: #f0b6c8; /* ── Color · Stage Glow (Stage 위 전용 · 장식 전용) ─────────────── */ --mml-glow-cyan: #22d3ee; --mml-glow-azure: #3b82f6; --mml-glow-violet: #8b5cf6; --mml-glow-amber: #f59e0b; --mml-glow-rose: #f43f5e; /* ── Color · Semantic ───────────────────────────────────────────── */ --mml-success: #16a34a; --mml-warning: #d97706; --mml-error: #dc2626; --mml-info: #2563eb; /* ── Typography · Family ────────────────────────────────────────── */ --mml-font-sans: 'Wanted Sans', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif; --mml-font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace; /* ── Typography · Weight ────────────────────────────────────────── 2굵기 시스템입니다. 본문은 400, 그 외 전부 500. 위계는 굵기가 아니라 크기 · 색 · 자간이 만듭니다. 세 번째 굵기를 추가하지 마세요 — 추가하는 순간 어디에 무엇을 쓸지 매번 판단해야 하고, 판단은 곧 불일치가 됩니다. */ --mml-w-regular: 400; /* 본문 · 캡션 */ --mml-w-medium: 500; /* 디스플레이 · 타이틀 · 라벨 · 버튼 · 내비 · 본문 강조 */ /* ── Typography · Scale ─────────────────────────────────────────── */ --mml-display-mega-size: 64px; --mml-display-mega-lh: 1.06; --mml-display-mega-ls: -0.03em; --mml-display-xl-size: 48px; --mml-display-xl-lh: 1.10; --mml-display-xl-ls: -0.025em; --mml-display-lg-size: 36px; --mml-display-lg-lh: 1.18; --mml-display-lg-ls: -0.02em; --mml-display-md-size: 32px; --mml-display-md-lh: 1.20; --mml-display-md-ls: -0.02em; --mml-display-sm-size: 24px; --mml-display-sm-lh: 1.30; --mml-display-sm-ls: -0.015em; --mml-title-md-size: 20px; --mml-title-md-lh: 1.40; --mml-title-md-ls: -0.01em; --mml-title-sm-size: 18px; --mml-title-sm-lh: 1.45; --mml-title-sm-ls: -0.005em; --mml-body-lg-size: 18px; --mml-body-lg-lh: 1.65; --mml-body-lg-ls: 0; --mml-body-md-size: 16px; --mml-body-md-lh: 1.65; --mml-body-md-ls: 0; --mml-body-sm-size: 15px; --mml-body-sm-lh: 1.60; --mml-body-sm-ls: 0; --mml-caption-size: 14px; --mml-caption-lh: 1.50; --mml-caption-ls: 0; --mml-overline-size: 12px; --mml-overline-lh: 1.40; --mml-overline-ls: 0.08em; --mml-spec-size: 15px; --mml-spec-lh: 1.40; --mml-spec-ls: 0.02em; --mml-button-size: 15px; --mml-button-lh: 1.00; --mml-button-ls: 0; --mml-nav-size: 15px; --mml-nav-lh: 1.40; --mml-nav-ls: -0.005em; /* ── Spacing (4px base) ─────────────────────────────────────────── */ --mml-space-xxs: 4px; --mml-space-xs: 8px; --mml-space-sm: 12px; --mml-space-base: 16px; --mml-space-md: 20px; --mml-space-lg: 24px; --mml-space-xl: 32px; --mml-space-xxl: 48px; --mml-space-xxxl: 64px; --mml-space-section: 96px; --mml-space-section-lg: 128px; /* ── Layout ─────────────────────────────────────────────────────── */ --mml-container: 1200px; --mml-container-text: 720px; /* 읽기용 본문 최대폭 */ --mml-gutter: 24px; --mml-nav-height: 64px; /* ── Radius ─────────────────────────────────────────────────────── */ --mml-radius-none: 0px; --mml-radius-xs: 4px; --mml-radius-sm: 6px; --mml-radius-md: 8px; --mml-radius-lg: 12px; --mml-radius-xl: 16px; --mml-radius-xxl: 24px; --mml-radius-pill: 9999px; --mml-radius-full: 9999px; /* ── Elevation ──────────────────────────────────────────────────── */ --mml-shadow-soft: 0 4px 16px rgba(11, 12, 14, 0.04); --mml-shadow-lift: 0 8px 28px rgba(11, 12, 14, 0.07); --mml-shadow-stage: 0 12px 40px rgba(0, 0, 0, 0.45); /* ── Motion ─────────────────────────────────────────────────────── */ --mml-dur-fast: 120ms; --mml-dur-base: 200ms; --mml-dur-slow: 320ms; --mml-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --mml-ease-inout: cubic-bezier(0.4, 0, 0.2, 1); /* ── Semantic surface aliases ─────────────────────────────────── 컴포넌트는 아래 4개만 참조합니다. Stage 전환 시 재매핑됩니다. */ --mml-bg: var(--mml-canvas); --mml-fg: var(--mml-ink); --mml-fg-body: var(--mml-body); --mml-fg-muted: var(--mml-muted); --mml-card-bg: var(--mml-surface-card); --mml-plate-bg: var(--mml-surface-strong); --mml-line: var(--mml-hairline); --mml-line-strong: var(--mml-hairline-strong); } /* ── Stage 모드 ───────────────────────────────────────────────────── [data-surface="stage"] 를 섹션에 붙이면 그 안의 모든 컴포넌트가 다크 연출면 규칙으로 자동 전환됩니다. */ [data-surface="stage"] { --mml-bg: var(--mml-stage); --mml-fg: var(--mml-on-stage); --mml-fg-body: var(--mml-on-stage-body); --mml-fg-muted: var(--mml-on-stage-soft); --mml-card-bg: var(--mml-stage-elevated); --mml-plate-bg: var(--mml-stage-soft); --mml-line: var(--mml-hairline-stage); --mml-line-strong: var(--mml-hairline-stage-strong); background: var(--mml-stage); color: var(--mml-on-stage); /* 내부 bloom(z-index:-1)이 이 표면 위에 그려지도록 스태킹 컨텍스트를 만듭니다 */ position: relative; overflow: hidden; isolation: isolate; }