/* * THEME: ankar-ai-design (SPEC §3.2) * 출신: _inbox/ankar-ai-design/tokens.css * * 톤: "Midnight command center, crisp information." * - 캔버스는 순수 white, 본문은 정확한 모노크롬 (검정 → ash → light steel). * - 다크 immersive 패널 두 단: deep-graphite (#171717, L2 prominent) + * inkwell (#000000, L3 overlays / hero / footer). * - 채도 있는 색은 단 하나의 따뜻한 강조 — Crimson Hue (#ff2600) — 핵심 액센트. * Ember Orange (#ff7e20) 는 보조 (terminal $ 프롬프트, 마이크로 데코). * - radius 거의 0 (sharp). 4px 가 기본, pill 은 100px. * - elevation 없음 (flat). depth = surface separation + hairline. * * 매핑표 (키트 변수 → 계약 변수): * --color-crimson-hue (#ff2600) → --c-action * (crimson 살짝 어둡게) (#e62200) → --c-action-hover (도출, 키트 미정의) * --color-canvas (#ffffff) → --c-on-action * --color-ember-orange (#ff7e20) → --c-accent (보조 강조 — terminal cursor, mark glyph) * * --color-inkwell / --color-text (#000000) → --c-ink * --color-dark-stone / --color-text-muted (#515151) → --c-body * --color-ash-stone / --color-text-helper (#979797) → --c-muted * --color-canvas / --color-text-on-dark (#ffffff) → --c-on-dark * --color-light-steel / --color-text-on-dark-muted (#cfcfcf) → --c-on-dark-muted * --color-inkwell (#000000) → --c-link (a 는 ink, hover 는 opacity) * * --surface-canvas / --color-canvas (#ffffff) → --c-canvas * --surface-cloud / --color-cloud-gray (#f8f8f8) → --c-surface (L1 카드 표면) * --color-cloud-gray (#f8f8f8) → --c-surface-soft (라이트 위 살짝 다른 표면 — soft 단) * --surface-graphite / --color-deep-graphite (#171717) → --c-surface-dark (L2 다크 패널) * --surface-inkwell (#000000) → --c-surface-dark-elev (L3 immersive / hero / footer overlay) * * --color-border / --color-ash-stone (#979797) → --c-hairline (라이트 카드 경계) * --color-border-strong / --color-inkwell (#000000) → --c-border-strong * * #1f8a5b (Nav 'SYSTEM ONLINE' dot, deep green) → --c-success (도출, 의미색 보조) * (키트 미정의) → --c-danger (--c-action 과 거의 동음 — 별도 deep red 도출) * * 누락 처리: * --c-surface-soft — 키트의 light surface 두 단(canvas/cloud)이 같은 흰 톤이라 * cloud-gray(#f8f8f8) 를 soft 자리에 그대로 둠. canvas 와 미세 대비. * --c-on-dark-muted — 키트의 light-steel(#cfcfcf) 그대로 매핑. * --c-success / --c-danger — 키트 토큰 미정의. Nav 의 dot 색(#1f8a5b)을 success 로, * crimson 과 구분되는 deeper red(#b91c1c) 를 danger 도출. * * 브랜드 장식 색 (계약 안 함, 부품에 raw hex 로 유지 — §3.1 / decorative_hex_ok): * --gradient-ember (#c679c4, #fa3d1d, #ffb005) — Hero / Showcase / Footer CTA 의 * "Ember light-leaks" 라디얼 그라데이션. React 버전이 alpha 와 함께 인라인 박힘 * → astro 부품에서도 그대로 raw rgba 로 유지 (장식, 키트 정체성의 핵심). * #ff7e20 ember-orange — terminal '$ ' 프롬프트 (mono accent). --c-accent 로 받음. * * 타입 스케일: * 키트: display-xl 64 / display 48 / heading-lg 40 / heading 32 / heading-sm 24 / * body-lg 16 / body 14 / caption 12. * 역할 매핑: display-xl→t-display, display→t-h1, heading-lg→t-h2, heading→t-h3, * body-lg→t-body, body→t-body-sm, caption→t-caption. * * 간격: * 키트: 4px base, compact density. --section-gap 64px, --card-padding 16px. * 키트가 80px+ 마진을 거의 안 씀 — Ankar 는 deliberately compact. --s-section 은 * 부품에서 실제로 96~108px 패딩이 쓰임 → 96px 채택 (마케팅 호흡 + Ankar 정체성 절충). * * Radius / 그림자: * 키트: sharp / compact — radius-md 4px 가 기본, pill 100px. shadow 는 거의 없음 * (flat, high-contrast). 하나의 float 만 정의 (terminal box, dropdown 용). */ :root { /* ===== 색: 액션 ===== */ --c-action: #ff2600; /* Crimson Hue — 단 하나의 sharp accent */ --c-action-hover: #e62200; /* 도출: crimson 살짝 어둡게 */ --c-on-action: #ffffff; --c-accent: #ff7e20; /* Ember Orange — terminal $, mark glyph 등 보조 */ /* ===== 색: 텍스트 ===== */ --c-ink: #000000; /* inkwell */ --c-body: #515151; /* dark-stone */ --c-muted: #979797; /* ash-stone */ --c-on-dark: #ffffff; --c-on-dark-muted: #cfcfcf; /* light-steel */ --c-link: #000000; /* 키트 a 색 = ink, hover 는 opacity */ /* ===== 색: 배경/표면 ===== */ --c-canvas: #ffffff; /* surface-canvas (L0) */ --c-surface: #f8f8f8; /* surface-cloud (L1) — 라이트 카드 표면 */ --c-surface-soft: #f8f8f8; /* 키트의 두 라이트 단이 같음 — soft 자리에 cloud */ --c-surface-dark: #171717; /* surface-graphite (L2) — 다크 카드 / Nav dim */ --c-surface-dark-elev: #000000; /* surface-inkwell (L3) — Hero/Footer immersive */ /* ===== 색: 경계 ===== */ --c-hairline: #979797; /* 키트 --color-border / ash-stone */ --c-border-strong: #000000; /* 키트 --color-border-strong / inkwell */ /* ===== 색: 의미 ===== */ --c-success: #1f8a5b; /* Nav 'SYSTEM ONLINE' dot — 도출 */ --c-danger: #b91c1c; /* 도출 (키트 미정의 — crimson 과 구분되는 deep red) */ /* ===== 폰트 / 폰트 두께 ===== */ /* SPEC §3.1: 폰트는 테마 영역이 아님 — registry/fontsets/ankar-ai-design.{css,json} 참조. */ /* ===== 타입 스케일 ===== 키트 토큰: display-xl 64 / display 48 / heading-lg 40 / heading 32 / heading-sm 24 / body-lg 16 / body 14 / caption 12. 역할 매핑: display-xl→t-display, display→t-h1, heading-lg→t-h2, heading→t-h3, body-lg→t-body, body→t-body-sm, caption→t-caption. */ --t-display: 64px; /* 키트 display-xl */ --t-h1: 48px; /* 키트 display */ --t-h2: 40px; /* 키트 heading-lg */ --t-h3: 32px; /* 키트 heading */ --t-body: 16px; /* 키트 body-lg — 본문 가독성 */ --t-body-sm: 14px; /* 키트 body */ --t-caption: 12px; /* 키트 caption */ /* ===== 간격 ===== 키트: 4px base, --section-gap 64px, --card-padding 16px. 역할 스케일은 사이트 공통 4·8·12·16·24·32·48·64. --s-section 96px — Ankar 부품들이 실제로 96~108px section padding 을 씀. --s-container 1200px — 키트 --container-max. */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-section: 96px; /* Ankar 부품 실측 — compact 호흡 */ --s-container: 1200px; /* 키트 --container-max */ /* ===== radius ===== 키트: sharp / compact — radius-sm 2 / radius-md 4 (기본) / radius-full 100. */ --r-sm: 2px; --r-md: 4px; /* 키트 기본 */ --r-lg: 8px; /* 도출 (키트는 4px 만 — 약간 큰 카드용) */ --r-pill: 100px; /* 키트 --radius-full */ /* ===== 그림자 ===== 키트: --shadow-none 가 기본. float 단 하나만 — dropdown / floating menu / terminal 용. 실제 Hero 의 terminal box: 0 30px 80px rgba(0,0,0,0.6) — dark immersive 위 강한 lift. */ --shadow-card: none; --shadow-float: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.08); }