/* Liki token contract. * * Layers: * 1. --brand-* / palette values are primitives; never consume them directly * from components when a semantic token exists. * 2. --color-* and --liki-* are semantic aliases used by marketing and product. * 3. --el-* is a component bridge owned by the Element Plus theme section. * * New component CSS must use a semantic token. Raw values are allowed only in * this primitive layer or a narrow layout measurement that has no token yet. */ :root { /* brand palette */ --brand-primary: #533afd; --brand-primary-hover: #4434d4; --brand-primary-soft: #efedff; --brand-primary-border: #cfcaff; --brand-on-primary: #ffffff; --brand-gold: #975a16; --brand-gold-hover: #744210; --brand-gold-on-dark: #e4c878; --brand-gold-tint: #fff7e6; --brand-accent-on-ink: var(--brand-gold-on-dark); --brand-ink: #0d253d; --brand-text: #102a43; --brand-text-muted: #526378; --brand-text-faint: #5a6d83; --brand-paper: #f6f9fc; --brand-surface: #ffffff; --brand-line: #e3e8ee; --brand-line-strong: #cbd5e1; /* Dark chrome and selected-state colors. Component code consumes the * matching --liki-on-* / --liki-* semantic aliases below. */ --brand-on-ink: #ffffff; --brand-on-ink-subtle: rgba(255, 255, 255, 0.78); --brand-on-ink-link: #cfd3db; --brand-on-ink-muted: #c0c5cc; --brand-on-ink-label: #8b93a1; --brand-on-ink-line: rgba(255, 255, 255, 0.12); --brand-on-ink-hover: rgba(255, 255, 255, 0.08); --brand-selected-overlay: rgba(83, 58, 253, 0.32); --brand-surface-cream: #fdfaf3; --brand-primary-alpha-10: rgba(83, 58, 253, 0.10); --brand-primary-alpha-12: rgba(83, 58, 253, 0.12); --brand-shadow-strong: 0 6px 18px rgba(30, 34, 48, 0.08); --brand-success-border: #bfe6bf; --brand-success-surface: #f4faf4; /* semantic aliases shared by every surface */ --color-accent: var(--brand-primary); --color-accent-hover: var(--brand-primary-hover); --color-accent-soft: var(--brand-primary-soft); --color-accent-focus: rgba(83, 58, 253, 0.18); --color-fire: #d92d20; --color-fire-hover: #b42318; --color-paper: var(--brand-paper); --color-surface: var(--brand-surface); --color-text: var(--brand-text); --color-text-muted: var(--brand-text-muted); --color-border: var(--brand-line); --color-border-hover: var(--brand-line-strong); --color-gold: var(--brand-gold); --color-gold-light: var(--brand-gold-on-dark); --color-header-text: #f7f6f4; --color-github: #181717; --color-telegram: #26a5e4; --color-on-primary-border: rgba(255, 255, 255, 0.4); --color-input-ink: #232733; --color-error: #d92d20; --color-error-border: rgba(217, 45, 32, 0.35); --color-danger-surface: #fff8f7; --color-success: #067647; --color-success-border: var(--brand-success-border); --color-success-surface: var(--brand-success-surface); --color-text-faint: var(--brand-text-faint); /* Product semantic aliases. Keep these in the canonical token layer so * static pages, the Vue app, Admin, and Element Plus resolve one contract. */ --liki-primary: var(--brand-primary); --liki-primary-hover: var(--brand-primary-hover); --liki-primary-tint: var(--brand-primary-soft); --liki-primary-border: var(--brand-primary-border); --liki-primary-alpha-10: var(--brand-primary-alpha-10); --liki-primary-alpha-12: var(--brand-primary-alpha-12); --liki-shadow-strong: var(--brand-shadow-strong); --liki-accent-on-ink: var(--brand-accent-on-ink); --liki-ink: var(--brand-ink); --liki-paper: var(--brand-paper); --liki-surface: var(--brand-surface); --liki-surface-cream: var(--brand-surface-cream); --liki-text-2: var(--brand-text-muted); --liki-text-3: var(--brand-text-faint); --liki-line: var(--brand-line); --liki-on-primary: var(--brand-on-primary); --liki-on-ink: var(--brand-on-ink); --liki-on-ink-subtle: var(--brand-on-ink-subtle); --liki-on-ink-link: var(--brand-on-ink-link); --liki-on-ink-muted: var(--brand-on-ink-muted); --liki-on-ink-label: var(--brand-on-ink-label); --liki-on-ink-line: var(--brand-on-ink-line); --liki-on-ink-hover: var(--brand-on-ink-hover); --liki-selected-overlay: var(--brand-selected-overlay); /* shared radius contract */ --radius-card: 16px; --radius-control: 10px; --radius-small: 6px; --radius-none: 0; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* shared elevation contract */ --shadow-card: 0 1px 2px rgba(13, 37, 61, 0.04), 0 8px 24px rgba(13, 37, 61, 0.05); --shadow-card-hover: 0 12px 32px rgba(13, 37, 61, 0.09), 0 3px 10px rgba(13, 37, 61, 0.05); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05); /* shared type, spacing, and motion contracts */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; --font-size-micro: 11px; --font-size-caption: 12px; --font-size-label: 13px; --font-size-body: 14px; --font-size-body-lg: 15px; --font-size-title-sm: 16px; --font-size-title-xs: 18px; --font-size-title-md: 20px; --font-size-title-lg: 24px; --font-size-display-sm: 27px; --font-size-display: 32px; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --duration-xs: 100ms; --duration-sm: 150ms; --duration-md: 250ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --z-header: 50; --z-surface: 50; --z-skip-link: 100; --scroll-margin-header: 88px; --color-white: #ffffff; --color-error-soft: #fef2f2; } /* Element Plus bridge. Keep vendor component variables in the canonical token * source so product components consume semantic aliases only. */ :root { --el-font-family: var(--liki-font-sans); --el-color-primary: var(--liki-primary); --el-color-primary-light-3: #8a7bfa; --el-color-primary-light-5: #aca5fd; --el-color-primary-light-7: #d3d0fe; --el-color-primary-light-8: #e7e5ff; --el-color-primary-light-9: var(--liki-primary-tint); --el-color-primary-dark-2: var(--liki-primary-hover); /* EP defaults are deepened where their light-background contrast misses AA. */ --el-color-danger: #b42318; --el-color-danger-dark-2: #93261d; --el-color-danger-light-7: #fbe3e1; --el-color-danger-light-9: #fef2f2; --el-color-warning: #b45309; --el-color-warning-light-9: #fffaeb; --el-color-success: #067647; --el-color-success-dark-2: #04523a; --el-table-header-text-color: #526378; --el-empty-description-color: #526378; --el-alert-title-color: #303133; --el-text-color-secondary: #526378; --el-border-radius-base: 10px; --el-border-radius-small: 8px; --el-border-radius-round: 999px; --el-box-shadow: 0 1px 2px rgba(13, 37, 61, 0.04), 0 8px 24px rgba(13, 37, 61, 0.05); --el-box-shadow-light: 0 1px 2px rgba(13, 37, 61, 0.03), 0 6px 18px rgba(13, 37, 61, 0.04); } /* Static pages retain a few legacy aliases. Product code must use the canonical * shared aliases above; do not add new consumers for these raw names. */ :root { --color-fire-raw: #b85450; --color-stone-50-raw: #fafaf9; --color-stone-500-raw: #78716c; --color-stone-600-raw: #57534e; --color-shadow-line: rgba(0,0,0,.06); --color-header-bg: rgba(17, 31, 46, 0.82); --color-header-border: rgba(255,255,255,.15); --color-gold-alpha-20: rgba(228,200,120,.2); --color-white-alpha-92: rgba(255,255,255,.92); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -4px rgba(0,0,0,.04); --shadow-xl: 0 20px 25px -5px rgba(0,0,0,.08), 0 8px 10px -6px rgba(0,0,0,.04); --space-10: 40px; --space-12: 48px; --font-serif: "Songti SC", "Noto Serif SC", "Noto Serif CJK SC", "STSong", "SimSun", "宋体", "AR PL UMing CN", "Hiragino Mincho Pro", "Noto Serif TC", serif; --liki-font-sans: var(--font-sans); --liki-font-serif: var(--font-serif); --liki-dur: 160ms; --liki-ease: var(--ease-standard); }