admin/pos-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Cải thiện giao diện trang chủ với thành phần Banner thông báo, cập nhật cấu trúc điều hướng và tối ưu hóa màu sắc cho phong cách tối giản.

Browse Source
This commit is contained in:
Ho Ngoc Hai
2026-01-04 18:15:36 +07:00
parent f989a2f7d7
commit d404689531
4 changed files with 357 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files

258
apps/web-client/src/app/page.tsx
View File

@@ -4,10 +4,11 @@ import { useAuthStore } from '@/stores/auth-store';
import { useEffect, useState } from 'react';
import { useTranslation } from '@/shared/hooks/use-translation';
import { BrandLogo } from '@/features/shared/components/brand';
import { Button } from '@/ui'; // NEW: Using new Button from feature-based structure with glassmorphism
import { Button } from '@/ui';
import { Footer } from '@/shared/components/layout/footer';
import { NavigationHeader } from '@/shared/components/layout/header';
import { Zap, Building, Code } from 'lucide-react';
import { AnnouncementBanner } from '@/shared/components/layout/announcement-banner';
import { Search, ArrowRight, Code, Zap, Globe } from 'lucide-react';
/**
* EN: Home page component - main application entry point with brand elements
@@ -62,121 +63,158 @@ export default function Home() {
<>
<NavigationHeader />
{/* EN: Dynamic Background - Pastel Mesh Gradient / VI: Nền động - Mesh Gradient Pastel */}
<div className="mesh-gradient">
{/* EN: Primary Pastel Blue / VI: Xanh Pastel chính */}
<div className="mesh-spot w-[800px] h-[800px] bg-[#93C5FD] -top-1/4 -left-1/4 opacity-[0.08]" />
{/* EN: Soft Purple / VI: Tím mềm */}
<div className="mesh-spot w-[600px] h-[600px] bg-[#C084FC] top-1/3 -right-1/4 opacity-[0.12]" style={{ animationDelay: '-7s' }} />
{/* EN: Bright Cyan / VI: Xanh lơ sáng */}
<div className="mesh-spot w-[500px] h-[500px] bg-[#67E8F9] -bottom-1/4 left-1/4 opacity-[0.1]" style={{ animationDelay: '-15s' }} />
</div>
{/* Announcement Banner */}
<AnnouncementBanner
title="Grok Business and Enterprise"
description="The best assistant in the world is now Enterprise ready"
linkText="Learn more"
linkUrl="/news"
/>
<main className="relative min-h-screen flex flex-col items-center pt-40 pb-32 px-6 overflow-hidden">
{/* EN: Floating particles for depth / VI: Các hạt lơ lửng tạo chiều sâu */}
<div className="absolute top-1/4 left-10 w-2 h-2 rounded-full bg-[#93C5FD] opacity-20 animate-float" />
<div className="absolute top-1/2 right-10 w-3 h-3 rounded-full bg-[#C084FC] opacity-20 animate-float" style={{ animationDelay: '2s' }} />
{/* Hero Section */}
<main className="min-h-screen bg-black text-white">
<div className="container mx-auto px-6">
{/* Hero Content */}
<div className="flex flex-col items-center justify-center min-h-screen text-center space-y-12">
<div className="max-w-4xl space-y-8">
<h1 className="text-6xl md:text-7xl font-bold leading-tight">
AI for all humanity
</h1>
<div className="container-responsive flex flex-col items-center space-y-24 z-10">
{/* EN: Hero Section / VI: Phần Hero */}
<div className="flex flex-col items-center text-center space-y-10 max-w-5xl animate-fadeIn">
<div className="p-4 rounded-3xl bg-white/5 backdrop-blur-2xl border border-white/10 mb-6 animate-float shadow-2xl">
<BrandLogo variant="full" size="xl" priority className="scale-125" />
</div>
<h1 className="text-7xl md:text-8xl font-display font-black tracking-tight bg-clip-text text-transparent bg-brand-gradient-vertical leading-[0.9] pb-4 drop-shadow-2xl">
{t('home.title')}
</h1>
<p className="text-2xl md:text-3xl text-text-secondary max-w-3xl leading-relaxed font-medium">
{t('home.description')}
</p>
<div className="flex flex-col sm:flex-row gap-8 pt-6 w-full sm:w-auto">
{!isAuthenticated ? (
<>
<Button
variant="brand"
size="xl"
onPress={() => (window.location.href = '/auth/login')}
className="px-14 py-8 text-xl rounded-full shadow-brand transition-all hover:scale-110 active:scale-95 hover:shadow-brand-lg"
>
Get Started
</Button>
<Button
variant="glass"
size="xl"
onPress={() => (window.location.href = '/auth/login')}
className="px-14 py-8 text-xl rounded-full transition-all hover:bg-white/15"
>
Explore
</Button>
</>
) : (
<Button
variant="brand"
size="xl"
onPress={() => (window.location.href = '/chat')}
className="px-14 py-8 text-xl rounded-full shadow-brand hover:scale-110"
>
Dashboard
</Button>
)}
</div>
</div>
{/* EN: Feature Highlights / VI: Điểm nổi bật tính năng */}
{!isAuthenticated && (
<div className="grid grid-cols-1 md:grid-cols-3 gap-10 w-full">
{[
{ title: 'Fast Development', icon: Zap, desc: 'Build and deploy in minutes' },
{ title: 'Enterprise Ready', icon: Building, desc: 'Production-grade platform' },
{ title: 'Developer First', icon: Code, desc: 'Built for modern teams' },
].map((feature, index) => (
<div
key={index}
className="glass-card p-10 rounded-[2.5rem] group animate-fadeIn animate-float"
style={{
animationDelay: `${index * 0.4}s`,
animationDuration: '8s'
}}
>
<div className="w-20 h-20 rounded-3xl bg-brand-primary/10 flex items-center justify-center mb-8 transition-all duration-slower group-hover:bg-brand-primary group-hover:scale-110 group-hover:rotate-6 shadow-xl">
<feature.icon className="h-10 w-10 text-brand-primary transition-colors group-hover:text-white" />
</div>
<h3 className="text-2xl font-black mb-4 text-text-primary group-hover:text-brand-primary transition-colors">
{feature.title}
</h3>
<p className="text-lg text-text-secondary leading-relaxed font-medium">
{feature.desc}
</p>
</div>
))}
</div>
)}
{/* EN: Status Section / VI: Khu vực trạng thái */}
<div className="animate-fadeIn" style={{ animationDelay: '1.2s' }}>
{isAuthenticated && user && (
<div className="glass-card p-12 rounded-[3.5rem] flex flex-col items-center space-y-8 min-w-[450px] shadow-[0_0_100px_rgba(59,130,246,0.1)]">
{/* Search Input */}
<div className="max-w-2xl mx-auto">
<div className="relative">
<div className="absolute inset-0 bg-brand-primary blur-3xl opacity-30 animate-pulse" />
<div className="w-28 h-28 bg-brand-gradient rounded-[2.5rem] flex items-center justify-center text-5xl font-black text-white relative z-10 rotate-3 animate-float">
{user.email?.[0].toUpperCase()}
</div>
</div>
<div className="text-center">
<p className="text-2xl font-bold text-text-primary mb-2">
{t('home.welcome', { email: user.email })}
</p>
<div className="inline-flex items-center px-6 py-2 rounded-full bg-white/5 text-text-secondary border border-white/10">
<span className="w-3 h-3 rounded-full bg-accent-success mr-4 shadow-[0_0_12px_var(--accent-success)]" />
<span className="uppercase tracking-[0.2em] font-black text-xs">{user.role}</span>
<div className="absolute inset-0 bg-white/10 backdrop-blur-sm rounded-full border border-white/20" />
<div className="relative flex items-center">
<input
type="text"
placeholder="What do you want to know?"
className="w-full px-6 py-4 bg-transparent text-white placeholder-white/60 rounded-full focus:outline-none text-lg"
/>
<Button
variant="ghost"
size="sm"
className="absolute right-2 p-2 hover:bg-white/20 rounded-full"
>
<Search className="h-5 w-5" />
</Button>
</div>
</div>
</div>
)}
</div>
</div>
{/* Products Section */}
<section className="py-24">
<div className="text-center mb-16">
<div className="inline-flex items-center space-x-2 mb-4">
<span className="text-white/60 text-sm font-medium">[</span>
<span className="text-white text-sm font-medium">Products</span>
<span className="text-white/60 text-sm font-medium">]</span>
</div>
<h2 className="text-4xl md:text-5xl font-bold">AI for all humanity</h2>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{/* Grok Card */}
<div className="bg-white/5 backdrop-blur-sm rounded-2xl border border-white/10 p-8 hover:bg-white/10 transition-all duration-300 group">
<div className="flex flex-col space-y-6">
<div className="flex items-center justify-between">
<h3 className="text-2xl font-bold">Grok</h3>
<div className="w-12 h-12 bg-white/10 rounded-full flex items-center justify-center group-hover:bg-white/20 transition-colors">
<ArrowRight className="h-5 w-5" />
</div>
</div>
<p className="text-white/80 leading-relaxed">
Grok is your cosmic guide, now accessible on grok.com, iOS, and Android. Explore the universe with AI.
</p>
<div className="flex items-center space-x-2">
<Button
variant="ghost"
size="sm"
className="text-white hover:bg-white/20"
onPress={() => window.location.href = '/chat'}
>
Use now
</Button>
</div>
</div>
</div>
{/* API Card */}
<div className="bg-white/5 backdrop-blur-sm rounded-2xl border border-white/10 p-8 hover:bg-white/10 transition-all duration-300 group">
<div className="flex flex-col space-y-6">
<div className="flex items-center justify-between">
<h3 className="text-2xl font-bold">API</h3>
<div className="w-12 h-12 bg-white/10 rounded-full flex items-center justify-center group-hover:bg-white/20 transition-colors">
<Code className="h-5 w-5" />
</div>
</div>
<p className="text-white/80 leading-relaxed">
Supercharge your applications with Grok's enhanced speed, precision, and multilingual capabilities.
</p>
<div className="flex items-center space-x-2">
<Button
variant="ghost"
size="sm"
className="text-white hover:bg-white/20"
onPress={() => window.location.href = '/api'}
>
Build now
</Button>
</div>
</div>
</div>
{/* Developer Docs Card */}
<div className="bg-white/5 backdrop-blur-sm rounded-2xl border border-white/10 p-8 hover:bg-white/10 transition-all duration-300 group">
<div className="flex flex-col space-y-6">
<div className="flex items-center justify-between">
<h3 className="text-2xl font-bold">Developer Docs</h3>
<div className="w-12 h-12 bg-white/10 rounded-full flex items-center justify-center group-hover:bg-white/20 transition-colors">
<Globe className="h-5 w-5" />
</div>
</div>
<p className="text-white/80 leading-relaxed">
Learn how to quickly install Grok at the heart of your applications and explore guides covering common use cases.
</p>
<div className="flex items-center space-x-2">
<Button
variant="ghost"
size="sm"
className="text-white hover:bg-white/20"
onPress={() => window.location.href = '/docs'}
>
Learn more
</Button>
</div>
</div>
</div>
</div>
</section>
{/* Authenticated User Section */}
{isAuthenticated && user && (
<section className="py-24">
<div className="max-w-md mx-auto">
<div className="bg-white/5 backdrop-blur-sm rounded-2xl border border-white/10 p-8 text-center">
<div className="w-20 h-20 bg-white/10 rounded-2xl flex items-center justify-center mx-auto mb-6 text-3xl font-bold">
{user.email?.[0].toUpperCase()}
</div>
<h3 className="text-xl font-bold mb-2">Welcome back</h3>
<p className="text-white/60 mb-6">{user.email}</p>
<Button
variant="ghost"
size="sm"
className="text-white border border-white/20 hover:bg-white/10 w-full"
onPress={() => window.location.href = '/chat'}
>
Continue to Chat
</Button>
</div>
</div>
</section>
)}
</div>
</main>

94
apps/web-client/src/features/shared/components/layout/announcement-banner.tsx Normal file
View File

@@ -0,0 +1,94 @@
'use client';
import React from 'react';
import { X } from 'lucide-react';
import { Button } from '@/features/shared/components/ui/button';
/**
* EN: Announcement Banner props
* VI: Props cho Announcement Banner
*/
export interface AnnouncementBannerProps {
/** Announcement title / Tiêu đề thông báo */
title: string;
/** Announcement description / Mô tả thông báo */
description: string;
/** Link text / Text link */
linkText: string;
/** Link URL / URL link */
linkUrl: string;
/** Show close button / Hiển thị button đóng */
showClose?: boolean;
/** On close callback / Callback khi đóng */
onClose?: () => void;
/** Additional CSS classes / CSS classes bổ sung */
className?: string;
}
/**
* EN: Announcement Banner - Clean banner for news/announcements (x.ai style)
* VI: Announcement Banner - Banner sạch sẽ cho tin tức/thông báo (phong cách x.ai)
*
* @example
* ```tsx
* <AnnouncementBanner
* title="New Feature Released"
* description="Check out our latest AI capabilities"
* linkText="Learn more"
* linkUrl="/news"
* />
* ```
*/
export function AnnouncementBanner({
title,
description,
linkText,
linkUrl,
showClose = false,
onClose,
className,
}: AnnouncementBannerProps) {
return (
<div className={`bg-black/40 backdrop-blur-sm border-b border-white/5 ${className}`}>
<div className="container mx-auto px-6">
<div className="flex items-center justify-between py-3">
<div className="flex items-center space-x-4">
<div className="flex items-center space-x-2">
<span className="text-xs text-text-tertiary uppercase tracking-wider font-medium">
News
</span>
</div>
<div className="hidden sm:block w-px h-4 bg-white/20" />
<div className="flex items-center space-x-3">
<h3 className="text-sm font-medium text-white">
{title}
</h3>
<span className="text-xs text-text-secondary">
{description}
</span>
</div>
</div>
<div className="flex items-center space-x-4">
<a
href={linkUrl}
className="text-xs text-text-secondary hover:text-white transition-colors underline"
>
{linkText}
</a>
{showClose && onClose && (
<Button
variant="ghost"
size="sm"
onPress={onClose}
className="p-1 h-auto hover:bg-white/10"
>
<X className="h-3 w-3" />
</Button>
)}
</div>
</div>
</div>
</div>
);
}

126
apps/web-client/src/features/shared/components/layout/header/navigation-header.tsx
View File

@@ -24,76 +24,82 @@ export interface NavigationHeaderProps {
}
/**
* EN: Navigation Header - Responsive header with brand logo, theme toggle, and language switcher
* VI: Navigation Header - Header responsive với logo, theme toggle và language switcher
*
* EN: Navigation Header - Clean x.ai style navigation
* VI: Navigation Header - Navigation theo phong cách x.ai sạch sẽ
*
* Features:
* - Sticky header with glassmorphism
* - Responsive design (mobile menu)
* - Brand logo integration
* - Theme toggle
* - Language switcher
* - Clean minimal design
* - Navigation menu items
* - CTA button
*
* - Responsive design
*
* @example
* ```tsx
* <NavigationHeader
* showCTA
* ctaText="Get Started"
* onCTAClick={() => router.push('/auth/login')}
* />
* <NavigationHeader />
* ```
*/
export function NavigationHeader({
showCTA = true,
ctaText = 'Get Started',
onCTAClick,
className,
}: NavigationHeaderProps) {
export function NavigationHeader({ className }: { className?: string }) {
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
const navItems = [
{ name: 'Grok', href: '/chat' },
{ name: 'API', href: '/api' },
{ name: 'Company', href: '/company' },
{ name: 'Careers', href: '/careers' },
{ name: 'News', href: '/news' },
];
return (
<header
className={cn(
'sticky top-0 z-50 w-full border-b border-white/10',
'bg-bg-primary/30 backdrop-blur-2xl',
'sticky top-0 z-50 w-full border-b border-white/5',
'bg-black/20 backdrop-blur-sm',
'transition-all duration-normal',
className
)}
>
<div className="container mx-auto px-4">
<div className="container mx-auto px-6">
{/* EN: Main header content / VI: Nội dung header chính */}
<div className="flex h-16 items-center justify-between">
<div className="flex h-14 items-center justify-between">
{/* EN: Logo / VI: Logo */}
<BrandLogoLink variant="wordmark" size="sm" href="/" />
{/* EN: Desktop Navigation / VI: Navigation desktop */}
<nav className="hidden md:flex items-center gap-4">
<ThemeToggle />
<LanguageSwitcher />
{showCTA && (
<Button
variant="brand"
size="md"
onPress={onCTAClick}
className="ml-2"
<nav className="hidden md:flex items-center space-x-8">
{navItems.map((item) => (
<a
key={item.name}
href={item.href}
className="text-text-secondary hover:text-white transition-colors text-sm font-medium"
>
{ctaText}
</Button>
)}
{item.name}
</a>
))}
</nav>
{/* EN: CTA Button / VI: Button CTA */}
<div className="hidden md:flex items-center">
<Button
variant="ghost"
size="sm"
onPress={() => window.location.href = '/chat'}
className="text-white border border-white/20 hover:bg-white/10 transition-all"
>
Try Grok
</Button>
</div>
{/* EN: Mobile Menu Button / VI: Button menu mobile */}
<button
className="md:hidden p-2 hover:bg-bg-tertiary rounded-md transition-colors"
className="md:hidden p-2 hover:bg-white/5 rounded-md transition-colors"
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
aria-label="Toggle mobile menu"
aria-expanded={mobileMenuOpen}
>
{mobileMenuOpen ? (
<X className="h-6 w-6" />
<X className="h-5 w-5 text-white" />
) : (
<Menu className="h-6 w-6" />
<Menu className="h-5 w-5 text-white" />
)}
</button>
</div>
@@ -101,27 +107,33 @@ export function NavigationHeader({
{/* EN: Mobile Menu / VI: Menu mobile */}
{mobileMenuOpen && (
<div
className="md:hidden py-4 space-y-4 border-t border-border-primary animate-fadeIn"
className="md:hidden py-4 space-y-4 border-t border-white/5 animate-fadeIn"
role="navigation"
aria-label="Mobile navigation"
>
<div className="flex items-center justify-between gap-4">
<ThemeToggle />
<LanguageSwitcher />
</div>
{showCTA && (
<Button
variant="brand"
size="lg"
onPress={() => {
onCTAClick?.();
setMobileMenuOpen(false);
}}
className="w-full"
>
{ctaText}
</Button>
)}
<nav className="flex flex-col space-y-4">
{navItems.map((item) => (
<a
key={item.name}
href={item.href}
className="text-text-secondary hover:text-white transition-colors text-sm font-medium py-2"
onClick={() => setMobileMenuOpen(false)}
>
{item.name}
</a>
))}
</nav>
<Button
variant="ghost"
size="sm"
onPress={() => {
window.location.href = '/chat';
setMobileMenuOpen(false);
}}
className="text-white border border-white/20 hover:bg-white/10 transition-all w-full mt-4"
>
Try Grok
</Button>
</div>
)}
</div>

90
apps/web-client/src/styles/theme.css
View File

@@ -78,56 +78,56 @@
/* Focus state - White */
/* ============================================
EN: Brand Colors (Primary Identity)
VI: Màu thương hiệu (Nhận diện chính)
EN: Minimal Brand Colors (x.ai Inspired)
VI: Màu thương hiệu tối giản (x.ai Inspired)
============================================ */
/* Primary Brand Color - Main brand identity (Blue - Tech & Trust) */
--brand-primary: #3B82F6;
--brand-primary-light: #60A5FA;
--brand-primary-dark: #2563EB;
--brand-primary-contrast: #FFFFFF;
/* Primary Brand Color - Clean white accent */
--brand-primary: #FFFFFF;
--brand-primary-light: #F8F8F8;
--brand-primary-dark: #E5E5E5;
--brand-primary-contrast: #000000;
/* Secondary Brand Color - Supporting color (Purple - Innovation) */
--brand-secondary: #8B5CF6;
--brand-secondary-light: #A78BFA;
--brand-secondary-dark: #7C3AED;
/* Secondary Brand Color - Subtle gray */
--brand-secondary: #888888;
--brand-secondary-light: #AAAAAA;
--brand-secondary-dark: #666666;
/* Accent Color - Call-to-action (Cyan - Energy) */
--brand-accent: #06B6D4;
--brand-accent-light: #22D3EE;
--brand-accent-dark: #0891B2;
/* Accent Color - Minimal gray accent */
--brand-accent: #CCCCCC;
--brand-accent-light: #DDDDDD;
--brand-accent-dark: #BBBBBB;
/* Brand Gradients - For backgrounds and special elements */
--brand-gradient-primary: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
--brand-gradient-accent: linear-gradient(135deg, var(--brand-accent) 0%, var(--brand-primary) 100%);
--brand-gradient-vertical: linear-gradient(180deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
/* Brand Gradients - Minimal monochromatic */
--brand-gradient-primary: linear-gradient(135deg, #FFFFFF 0%, #CCCCCC 100%);
--brand-gradient-accent: linear-gradient(135deg, #FFFFFF 0%, #AAAAAA 100%);
--brand-gradient-vertical: linear-gradient(180deg, #FFFFFF 0%, #CCCCCC 100%);
/* ============================================
EN: Glassmorphism Effects (Subtle x.ai Style)
VI: Hiệu ứng Glassmorphism (Phong cách x.ai tinh tế)
EN: Minimal Effects (x.ai Clean Style)
VI: Hiệu ứng tối giản (Phong cách x.ai sạch sẽ)
============================================ */
/* Glass Backgrounds - Very subtle for professional look */
--glass-bg-subtle: rgba(255, 255, 255, 0.02);
/* Ultra subtle - For minimal glass effect */
--glass-bg-default: rgba(255, 255, 255, 0.04);
/* Default glass background */
--glass-bg-medium: rgba(255, 255, 255, 0.06);
/* Medium glass effect */
--glass-bg-hover: rgba(255, 255, 255, 0.08);
/* Glass Backgrounds - Ultra minimal for clean look */
--glass-bg-subtle: rgba(255, 255, 255, 0.01);
/* Ultra subtle - For minimal effect */
--glass-bg-default: rgba(255, 255, 255, 0.02);
/* Default minimal background */
--glass-bg-medium: rgba(255, 255, 255, 0.03);
/* Medium minimal effect */
--glass-bg-hover: rgba(255, 255, 255, 0.04);
/* Hover state */
--glass-bg-active: rgba(255, 255, 255, 0.10);
--glass-bg-active: rgba(255, 255, 255, 0.05);
/* Active/pressed state */
/* Glass Borders - Thin and subtle */
--glass-border-subtle: rgba(255, 255, 255, 0.05);
/* Glass Borders - Very thin and subtle */
--glass-border-subtle: rgba(255, 255, 255, 0.03);
/* Very subtle border */
--glass-border-default: rgba(255, 255, 255, 0.08);
--glass-border-default: rgba(255, 255, 255, 0.05);
/* Default border */
--glass-border-hover: rgba(255, 255, 255, 0.12);
--glass-border-hover: rgba(255, 255, 255, 0.07);
/* Hover border */
--glass-border-focus: rgba(255, 255, 255, 0.20);
--glass-border-focus: rgba(255, 255, 255, 0.10);
/* Focus state - more visible */
/* Backdrop Blur Levels - Subtle to strong */
@@ -196,15 +196,15 @@
/* Heading Font - For section headings (24-36px) */
--font-heading: var(--font-inter), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
/* Type Scale / Kích thước chữ */
--text-6xl: 3.75rem;
/* 60px - Hero titles */
--text-5xl: 3rem;
/* 48px - Page titles */
/* Type Scale - Clean minimal approach */
--text-6xl: 3.5rem;
/* 56px - Hero titles */
--text-5xl: 2.75rem;
/* 44px - Page titles */
--text-4xl: 2.25rem;
/* 36px - Section headers */
--text-3xl: 1.875rem;
/* 30px - Card headers */
--text-3xl: 1.75rem;
/* 28px - Card headers */
--text-2xl: 1.5rem;
/* 24px - Large body */
--text-xl: 1.25rem;
@@ -226,7 +226,7 @@
--leading-relaxed: 1.625;
--leading-loose: 2;
/* Font Weights / Độ đậm chữ */
/* Font Weights - Clean and minimal */
--font-thin: 100;
--font-extralight: 200;
--font-light: 300;
@@ -237,7 +237,9 @@
/* Emphasized */
--font-semibold: 600;
/* Headings */
--font-bold: 700;
--font-bold: 600;
/* Clean bold - less heavy */
--font-extrabold: 700;
/* Strong emphasis */
/* ============================================