/** * BacInk design tokens — single source of truth for both the Vue SPA and the * static blog pages. * * Consumers: * - SPA: linked from index.html * - Static pages: pulled in via @import at the top of static-styles.css * * Color tokens use light-dark(): the dark value activates where * color-scheme allows dark — enabled site-wide (common.css for the SPA, * static-styles.css for article pages). Manual override via * (header toggle, src/utils/theme.ts). * * Never redeclare these values elsewhere. See * doc/refactor/STATIC_SPA_INTEGRATION_PLAN.md and .agents/skills/bacink-ui-guidelines/. */ :root { /* Brand & semantic colors */ --color-brand: #59c8e5; --color-brand-tint: #eafaff; --color-brand-soft: rgba(89, 200, 229, 0.08); /* = #59c8e515 */ --color-ink: light-dark(#2a2a2a, #d0cdc5); --color-heading: light-dark(#2c3e50, #e5e2da); --color-muted: light-dark(#666, #9a978f); --color-error: #c53030; /* matches .paper-alert-error text */ /* Font stacks */ --font-serif: 'PMingLiU', 'MingLiU', 'Songti TC', 'STSong', serif; --font-sans: 'Inter', -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; /* Radius scale */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 1rem; --radius-pill: 999px; /* Z-index layers (never use raw z-index values above component level) */ --z-header: 1000; --z-drawer-backdrop: 999; --z-drawer: 1001; --z-modal: 1050; --z-consent: 1100; /* Header geometry (referenced by App.vue, AppNavigation, AppFooter) */ --header-height: 80px; --gutter-line-x: 72px; --paper-bg: light-dark(#f6f8f8, #1d1d1b); --paper-surface: light-dark(#fffdf8, #232320); --paper-surface-bg: radial-gradient(light-dark(rgba(120, 97, 60, 0.035), transparent) 0.55px, transparent 0.55px), linear-gradient( 180deg, light-dark(rgba(255, 255, 255, 0.72), transparent), light-dark(rgba(248, 241, 229, 0.72), transparent) ), var(--paper-surface); --paper-shadow-raised: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 -1px 0 rgba(0, 0, 0, 0.04) inset, 0 8px 18px rgba(68, 56, 35, 0.12); --paper-shadow-raised-hover: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 -1px 0 rgba(0, 0, 0, 0.06) inset, 0 12px 24px rgba(68, 56, 35, 0.16); --neumo-inset: inset 4px 4px 8px light-dark(#d1d1d1, #121210), inset -4px -4px 8px light-dark(#ffffff, #30302c); --neumo-btn: 5px 5px 10px light-dark(#d1d1d1, #121210), -5px -5px 10px light-dark(#ffffff, #30302c); --neumo-btn-hover: 7px 7px 14px light-dark(#cecece, #121210), -6px -6px 12px light-dark(#ffffff, #30302c); --paper-focus-ring: 0 0 0 3px rgba(89, 200, 229, 0.16); /* rem (not em) so nested elements don't compound the size */ --body-text-size: 1.3rem; } :root.android-mobile { --paper-bg: #fff; --paper-surface: #fff; --paper-surface-bg: #fff; }