/* ========================================================================== Luxijie Design Tokens Version: 1.0 Updated: 2026-03-12 Token-driven design system for Luxijie Tech corporate website. All visual properties MUST reference these variables — no magic numbers. Naming convention: --{category}-{property}-{variant} e.g. --color-primary-1, --shadow-card-hover, --space-6 Categories: color-* Semantic colors (theme-aware) gradient-* Gradient definitions font-* Font families text-* Font sizes leading-* Line heights weight-* Font weights space-* Spacing scale (4px base grid) radius-* Border radius border-* Border styles shadow-* Box shadows z-* Z-index layers duration-* Transition durations ease-* Easing functions section-* Section-level layout container-* Container constraints Theme: Dark theme = default (:root) Light theme = [data-theme="light"] override ========================================================================== */ /* ========================================================================== 1. COLOR TOKENS — Dark Theme (Default) ========================================================================== */ :root { /* 1.1 Background colors -------------------------------------------------------------------- */ --color-bg: #0b0d12; /* Page background */ --color-bg-body: #0a0c11; /* Body base */ --color-bg-footer: #080a0e; /* Footer background */ --color-bg-card: #121620; /* Card surface */ --color-bg-header: rgba(12, 14, 20, 0.5); /* Sticky header */ --color-bg-header-solid: rgba(12, 14, 20, 0.85); /* Header scrolled */ --color-bg-glass: rgba(255, 255, 255, 0.06); /* Glassmorphism */ --color-bg-glass-subtle: rgba(255, 255, 255, 0.02); /* Section glass bg */ --color-bg-mobile-nav: rgba(12, 14, 20, 0.98); /* Mobile nav overlay */ --color-bg-input: rgba(255, 255, 255, 0.04); /* Form input bg */ --color-bg-input-focus: rgba(255, 255, 255, 0.08); /* Form input focus */ /* 1.2 Text colors -------------------------------------------------------------------- */ --color-text: #e7e9ee; /* Primary text */ --color-text-muted: #a8afbd; /* Secondary / descriptive text */ --color-text-inverse: #1a1c23; /* Text on light backgrounds */ /* 1.3 Brand colors (fixed — do NOT change across themes) -------------------------------------------------------------------- */ --color-primary-1: #7b5cff; /* Brand purple */ --color-primary-2: #3bd3ff; /* Brand cyan */ --color-accent-1: #ff72d2; /* Accent pink */ --color-accent-2: #7cffb2; /* Accent green */ /* 1.4 Semantic status colors -------------------------------------------------------------------- */ --color-danger: #ff5c5c; /* Error / pain point */ --color-success: #7cffb2; /* Success (alias accent-2) */ --color-info: #3bd3ff; /* Info (alias primary-2) */ /* 1.5 Border & divider colors -------------------------------------------------------------------- */ --color-border: #1d2230; /* Default border */ --color-border-glass: rgba(255, 255, 255, 0.05); /* Glass section border */ --color-divider: rgba(255, 255, 255, 0.08); /* Section divider */ /* 1.6 Shadow color -------------------------------------------------------------------- */ --color-shadow: rgba(0, 0, 0, 0.35); /* ======================================================================== 2. GRADIENT TOKENS ======================================================================== */ /* 2.1 Brand gradients -------------------------------------------------------------------- */ --gradient-brand: linear-gradient(135deg, var(--color-primary-1), var(--color-primary-2)); /* 2.2 Surface gradients -------------------------------------------------------------------- */ --gradient-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03)); --gradient-stat: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03)); --gradient-stat-hover: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.05)); /* 2.3 Hero background layers -------------------------------------------------------------------- */ --gradient-hero-1: radial-gradient(1200px 600px at 10% 10%, rgba(123, 92, 255, 0.18), transparent 60%); --gradient-hero-2: radial-gradient(900px 500px at 90% 0%, rgba(59, 211, 255, 0.12), transparent 60%); --gradient-hero-3: linear-gradient(180deg, #0a0c11, #0c0f16); /* 2.4 Decorative icon gradients (fixed — do NOT change across themes) -------------------------------------------------------------------- */ --gradient-icon-1: linear-gradient(135deg, var(--color-primary-1), var(--color-accent-1)); /* purple → pink */ --gradient-icon-2: linear-gradient(135deg, var(--color-primary-2), var(--color-accent-2)); /* cyan → green */ --gradient-icon-3: linear-gradient(135deg, #ff9f4a, #ffd86f); /* orange → gold */ /* 2.5 Pattern overlays -------------------------------------------------------------------- */ --pattern-grid: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); /* ======================================================================== 3. TYPOGRAPHY TOKENS ======================================================================== */ /* 3.1 Font families -------------------------------------------------------------------- */ --font-sans: "PingFang SC", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "SF Mono", "JetBrains Mono", "Roboto Mono", Consolas, monospace; /* 3.2 Font sizes — 8-level scale Use --text-hero for responsive hero titles only. -------------------------------------------------------------------- */ --text-xs: 12px; /* Labels, badges, footnotes */ --text-sm: 13px; /* Helper text, list items */ --text-base: 14px; /* Body default, descriptions */ --text-md: 16px; /* Paragraphs, nav items */ --text-lg: 18px; /* Sub-headings, FAQ questions */ --text-xl: 20px; /* Card titles, timeline titles */ --text-2xl: 28px; /* Section titles */ --text-3xl: 32px; /* Page sub-titles */ --text-hero: clamp(36px, 5vw, 64px); /* Hero title (responsive) */ --text-stat: 36px; /* Stat counter values */ /* 3.3 Line heights -------------------------------------------------------------------- */ --leading-tight: 1.15; /* Hero titles */ --leading-snug: 1.2; /* Section titles */ --leading-card: 1.3; /* Card titles */ --leading-list: 1.5; /* List items */ --leading-normal: 1.6; /* Body text */ --leading-relaxed: 1.8; /* Long-form reading */ /* 3.4 Font weights -------------------------------------------------------------------- */ --weight-normal: 400; /* Body text */ --weight-medium: 500; /* Nav links */ --weight-semibold: 600; /* Labels, button text */ --weight-bold: 700; /* Headings */ --weight-extra-bold: 800; /* Hero titles */ /* ======================================================================== 4. SPACING TOKENS — 4px half-step, 8px base grid ======================================================================== */ --space-1: 4px; /* Icon-text gap */ --space-2: 8px; /* Tight padding */ --space-3: 12px; /* List item gap */ --space-4: 16px; /* Card inner small gap */ --space-5: 20px; /* Component padding */ --space-6: 24px; /* Card padding, grid gap */ --space-8: 32px; /* Section inner spacing */ --space-10: 40px; /* Large block spacing */ --space-12: 48px; /* Section gap (small) */ --space-16: 64px; /* Section vertical padding */ --space-20: 80px; /* Hero / footer padding */ --space-24: 96px; /* First-screen special spacing */ /* ======================================================================== 5. BORDER RADIUS TOKENS — 3-tier system ======================================================================== */ --radius-sm: 8px; /* Small: logo-card, tags, badges */ --radius-md: 10px; /* Medium: buttons, inputs, icon containers */ --radius-lg: 16px; /* Large: cards, modals, media containers */ --radius-pill: 999px; /* Pill: hero-badge (NOT for buttons) */ /* ======================================================================== 6. BORDER TOKENS ======================================================================== */ --border-width: 1px; --border-style: solid; --border-default: var(--border-width) var(--border-style) var(--color-border); --border-glass: var(--border-width) var(--border-style) var(--color-border-glass); --border-focus: var(--border-width) var(--border-style) var(--color-primary-1); /* ======================================================================== 7. SHADOW TOKENS — 4-tier elevation system ======================================================================== */ /* Level 0: Resting state — no visible shadow */ --shadow-none: none; /* Level 1: Subtle — info items, logo cards, small interactive elements */ --shadow-sm: 0 4px 12px var(--color-shadow); /* Level 2: Default — cards at rest, contact cards */ --shadow-md: 0 8px 24px var(--color-shadow); /* Level 3: Elevated — cards on hover, floating elements */ --shadow-lg: 0 12px 32px var(--color-shadow); /* Level 4: Dramatic — modals, hero elements */ --shadow-xl: 0 20px 40px -10px var(--color-shadow); /* Brand glow — primary button resting */ --shadow-glow-primary: 0 10px 24px rgba(123, 92, 255, 0.25); /* Brand glow — primary button hover */ --shadow-glow-primary-hover: 0 14px 28px rgba(123, 92, 255, 0.35); /* Brand glow — secondary button resting */ --shadow-glow-secondary: 0 10px 24px rgba(59, 211, 255, 0.22); /* Brand glow — secondary button hover */ --shadow-glow-secondary-hover: 0 14px 28px rgba(59, 211, 255, 0.32); /* Focus ring — form inputs, interactive focus states */ --shadow-focus-ring: 0 0 0 4px rgba(123, 92, 255, 0.1); /* Dot indicator shadows */ --shadow-dot-danger: 0 0 0 4px rgba(255, 92, 92, 0.15); --shadow-dot-info: 0 0 0 4px rgba(59, 211, 255, 0.15); --shadow-dot-primary: 0 0 0 4px rgba(123, 92, 255, 0.15); /* ======================================================================== 8. Z-INDEX TOKENS — layering system ======================================================================== */ --z-behind: -1; /* Behind content (decorative pseudo-elements) */ --z-base: 0; /* Default stacking (decorative layers) */ --z-content: 1; /* Content layer (positioned content, badges) */ --z-overlay: 2; /* Overlays within components */ --z-sticky: 50; /* Sticky / fixed-position elements */ --z-header: 100; /* Site header / top navigation */ --z-dropdown: 200; /* Dropdowns, popovers, tooltips */ --z-modal: 1000; /* Modal dialogs, fullscreen overlays */ --z-toast: 1100; /* Toast notifications, alerts */ /* ======================================================================== 9. TRANSITION TOKENS ======================================================================== */ /* 9.1 Easing curves -------------------------------------------------------------------- */ --ease-out: cubic-bezier(0.4, 0, 0.2, 1); /* Standard deceleration */ --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* Symmetric motion */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Playful bounce */ /* 9.2 Durations -------------------------------------------------------------------- */ --duration-fast: 150ms; /* Micro-interactions (icon toggle, opacity) */ --duration: 300ms; /* Standard transitions (hover, focus) */ --duration-slow: 500ms; /* Enter/exit animations, page transitions */ /* 9.3 Composed transitions -------------------------------------------------------------------- */ --transition-default: all var(--duration) var(--ease-out); --transition-fast: all var(--duration-fast) var(--ease-out); --transition-slow: all var(--duration-slow) var(--ease-out); /* ======================================================================== 10. SECTION & CONTAINER LAYOUT TOKENS ======================================================================== */ /* 10.1 Container constraints -------------------------------------------------------------------- */ --container-max: 1280px; /* Max content width */ --container-padding: 24px; /* Horizontal gutter (matches --space-6) */ /* 10.2 Section spacing -------------------------------------------------------------------- */ --section-padding-y: 80px; /* Standard vertical padding */ --section-padding-y-sm: 60px; /* Reduced (mobile) */ /* 10.3 Hero dimensions -------------------------------------------------------------------- */ --hero-padding-top: 200px; /* Desktop hero top padding */ --hero-padding-bottom: 120px; /* Desktop hero bottom padding */ --hero-padding-top-mobile: 120px; /* Mobile hero top padding */ --hero-padding-bottom-mobile: 72px; /* Mobile hero bottom padding */ --hero-subtitle-max-w: 560px; /* Hero subtitle max width */ /* 10.4 Grid -------------------------------------------------------------------- */ --grid-gap: 24px; /* Default grid gap (matches --space-6) */ --grid-min-col: 280px; /* Min column width for auto-fill grids */ /* 10.5 Hover transforms — standardized displacements -------------------------------------------------------------------- */ --hover-lift-l1: translateY(-4px); /* L1 content cards */ --hover-lift-l3: translateY(-2px); /* L3 small info blocks */ --hover-slide: translateX(5px); /* Horizontal slide items */ --hover-scale-media: scale(1.05); /* Media zoom on hover */ --hover-lift-btn: translateY(-2px); /* Button hover lift */ /* ======================================================================== 11. BUTTON TOKENS ======================================================================== */ --btn-padding-y: 12px; --btn-padding-x: 24px; --btn-font-size: var(--text-base); --btn-font-weight: var(--weight-semibold); --btn-radius: var(--radius-md); /* Mobile overrides (apply inside @media) */ --btn-padding-y-mobile: 16px; --btn-padding-x-mobile: 18px; } /* ========================================================================== LIGHT THEME OVERRIDES — [data-theme="light"] Only theme-sensitive tokens are overridden. Brand colors (primary, accent) remain unchanged. ========================================================================== */ [data-theme="light"] { /* Backgrounds */ --color-bg: #ffffff; --color-bg-body: #f8f9fb; --color-bg-footer: #f1f3f5; --color-bg-card: #ffffff; --color-bg-header: rgba(255, 255, 255, 0.75); --color-bg-header-solid: rgba(255, 255, 255, 0.85); --color-bg-glass: rgba(0, 0, 0, 0.04); --color-bg-glass-subtle: rgba(0, 0, 0, 0.02); --color-bg-mobile-nav: rgba(255, 255, 255, 0.98); --color-bg-input: rgba(0, 0, 0, 0.03); --color-bg-input-focus: rgba(0, 0, 0, 0.05); /* Text */ --color-text: #1a1c23; --color-text-muted: #646a78; --color-text-inverse: #e7e9ee; /* Borders & dividers */ --color-border: #e2e4e8; --color-border-glass: rgba(0, 0, 0, 0.05); --color-divider: rgba(0, 0, 0, 0.06); /* Shadow (reduced for light surfaces) */ --color-shadow: rgba(0, 0, 0, 0.08); /* Gradients */ --gradient-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03)); --gradient-stat: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(248, 249, 251, 1)); --gradient-stat-hover: linear-gradient(180deg, #fff, #f0f2f5); --gradient-hero-1: radial-gradient(1200px 600px at 10% 10%, rgba(123, 92, 255, 0.08), transparent 60%); --gradient-hero-2: radial-gradient(900px 500px at 90% 0%, rgba(59, 211, 255, 0.08), transparent 60%); --gradient-hero-3: linear-gradient(180deg, #f8f9fb, #ffffff); /* Patterns */ --pattern-grid: linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px); } /* ========================================================================== BACKWARD-COMPATIBLE ALIASES Maps old variable names to new token names. Allows incremental migration — remove once all references are updated. ========================================================================== */ :root { --bg: var(--color-bg); --body-bg: var(--color-bg-body); --footer-bg: var(--color-bg-footer); --text: var(--color-text); --muted: var(--color-text-muted); --card: var(--color-bg-card); --border: var(--color-border); --primary-1: var(--color-primary-1); --primary-2: var(--color-primary-2); --accent-1: var(--color-accent-1); --accent-2: var(--color-accent-2); --shadow: var(--color-shadow); --glass-surface: var(--gradient-glass); /* --gradient-brand: already defined in :root, no alias needed */ --section-divider: var(--color-divider); --stat-bg: var(--gradient-stat); --stat-hover-bg: var(--gradient-stat-hover); --bg-layer-1: var(--gradient-hero-1); --bg-layer-2: var(--gradient-hero-2); --bg-layer-3: var(--gradient-hero-3); --header-bg: var(--color-bg-header); --glass-bg: var(--color-bg-glass); --mobile-nav-bg: var(--color-bg-mobile-nav); --grid-pattern: var(--pattern-grid); }