/* * ============================================================================ * 밀리AI 디자인 토큰 — 디자인 참고 저장소 1:1 이식본 * ============================================================================ * * 원본: .reference/miliai-hddn/src/app/design-system/tokens.css * 기준: 35458a0 (2026-08-03, "Merge pull request #21") * * ⚠️ 이 파일은 손으로 고치지 않는다. * 참고 저장소가 바뀌면 원본 diff 를 그대로 옮긴다(docs/design-system.md 의 동기화 절차). * 우리 사정으로 값을 바꿔야 하면 theme/variables.css 에서 덮어쓰고 이유를 주석으로 남긴다. * (현재 덮어쓰는 것: --mili-font-sans / --mili-font-metric — 한글 폴백 스택 때문) * * 스코프 규약(참고와 동일): * :root = 다크(기본) * .mili-light = 라이트 오버라이드 * .mili-dark = 다크 스코프 표식(값을 재정의하지 않는다. [data-palette] 분기에만 쓰인다) * * 참고는 이 클래스를
에 붙이지만(PortalApp.tsx:292), 우리는 SiteMesh 구조상 에 붙인다. * SiteMesh3 은 콘텐츠 페이지 의 class 를 데코레이터 로 넘겨준다(검증 완료). * ============================================================================ */ :root { color-scheme: dark; --mili-app-bg: #0E1013; --mili-sidebar-bg: #090A0C; --mili-surface: #15181C; --mili-surface-raised: #1E2227; --mili-surface-interactive: #2B3036; --mili-text: #F8F9FA; --mili-text-secondary: #ADB5BD; --mili-text-muted: #868E96; --mili-border: #2B3036; --mili-border-strong: #3F454C; --mili-primary: #B4FF39; --mili-primary-strong: #C7FF68; --mili-primary-bg: #2D4511; --mili-primary-border: #79AB25; --mili-primary-on: #18210E; --mili-info: #62B6F5; --mili-info-bg: #102E44; --mili-success: #63D392; --mili-success-bg: #163725; --mili-warning: #F6B84A; --mili-warning-bg: #3C2A0B; --mili-error: #FF8790; --mili-error-bg: #421C22; --mili-font-sans: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --mili-font-metric: "Orbitron Variable", Orbitron, sans-serif; --mili-focus: #C7FF68; --mili-control-height: 32px; --mili-control-height-lg: 40px; --mili-control-height-sm: 24px; --mili-text-xs: 12px; --mili-text-sm: 14px; --mili-text-md: 16px; --mili-text-lg: 20px; --mili-text-xl: 32px; --mili-line-tight: 1.2; --mili-line-body: 1.6; --mili-space-1: 4px; --mili-space-2: 8px; --mili-space-3: 12px; --mili-space-4: 16px; --mili-space-5: 20px; --mili-space-6: 24px; --mili-space-8: 32px; --mili-radius-none: 0; --mili-radius-button: 5px; --mili-radius-control: 10px; --mili-radius-filter: 8px; --mili-radius-card: 12px; --mili-radius-badge: 99px; --mili-radius-pill: 9999px; --mili-sidebar-width: 240px; --mili-sidebar-collapsed-width: 80px; --mili-topbar-height: 72px; --mili-content-max: 1440px; --mili-grid-columns: 12; --mili-grid-gutter: 24px; --mili-page-padding: 32px; --mili-tablet-grid-columns: 8; --mili-tablet-grid-gutter: 16px; --mili-tablet-page-padding: 24px; --mili-mobile-grid-columns: 4; --mili-mobile-grid-gutter: 12px; --mili-mobile-page-padding: 16px; --mili-motion-fast: 170ms; --mili-motion-standard: 200ms; } .mili-light { --mili-focus: #78AE28; --mili-app-bg: #F8F9FA; --mili-sidebar-bg: #FFFFFF; --mili-surface: #FFFFFF; --mili-surface-raised: #FFFFFF; --mili-surface-interactive: #F1F3F5; --mili-text: #1E2227; --mili-text-secondary: #5C636B; --mili-text-muted: #868E96; --mili-border: #DEE2E6; --mili-border-strong: #CED4DA; --mili-primary: #618F20; --mili-primary-strong: #4D731B; --mili-primary-bg: #E8F8C8; --mili-primary-border: #94C83A; --mili-primary-on: #FFFFFF; --mili-info: #1B6DA8; --mili-info-bg: #EFF8FF; --mili-success: #237A4B; --mili-success-bg: #EAF7EF; --mili-warning: #A96A08; --mili-warning-bg: #FFF6E5; --mili-error: #BA3B45; --mili-error-bg: #FFF0F1; } [data-palette="ocean"] { --course-accent: #1B6DA8; --course-header: #1B6DA8; } [data-palette="sky"] { --course-accent: #0B759F; --course-header: #0B759F; } [data-palette="violet"] { --course-accent: #5D3D9D; --course-header: #5D3D9D; } [data-palette="plum"] { --course-accent: #823671; --course-header: #823671; } [data-palette="coral"] { --course-accent: #A23E31; --course-header: #A23E31; } [data-palette="amber"] { --course-accent: #935B1B; --course-header: #935B1B; } [data-palette="teal"] { --course-accent: #19756D; --course-header: #19756D; } [data-palette="rose"] { --course-accent: #923852; --course-header: #923852; } .mili-dark [data-palette="ocean"] { --course-accent: #62B6F5; --course-header: #1B6DA8; } .mili-dark [data-palette="sky"] { --course-accent: #59C1F2; --course-header: #0B759F; } .mili-dark [data-palette="violet"] { --course-accent: #AA83F2; --course-header: #5D3D9D; } .mili-dark [data-palette="plum"] { --course-accent: #D878BD; --course-header: #823671; } .mili-dark [data-palette="coral"] { --course-accent: #F68168; --course-header: #A23E31; } .mili-dark [data-palette="amber"] { --course-accent: #E8AC45; --course-header: #935B1B; } .mili-dark [data-palette="teal"] { --course-accent: #4FC5B5; --course-header: #19756D; } .mili-dark [data-palette="rose"] { --course-accent: #E87894; --course-header: #923852; }