/*
* XOS Design Tokens v17.0
* Sprint 12.12.7C — Premium Native Blue Design System
* ==============================================
*
* ██████ DESIGN TOKENS SYSTEM ██████
*
* Mọi giá trị visual (màu sắc, khoảng cách, bo góc, shadow,
* typography, motion) đều tập trung tại đây.
*
* Nguyên tắc:
* - Mobile First: mọi token lấy Mobile làm gốc
* - Premium Multi-tone Blue: Navy Blue #1F4E8C (ACCENT ONLY)
* - App-First: loại bỏ tư duy Website
* - Touch Friendly: target >= 48dp
* - Performance: animation <= 300ms
*
* DO NOT CHANGE màu sắc, khoảng cách nếu không thuộc Sprint 12.12.7C.
*
* Chất lượng tham chiếu: Grab, Be, Airbnb, Google Maps, Shopee, Zalo
*/
/* ===========================================================
1. COLOR TOKENS — Premium Multi-tone Blue Palette
=========================================================== */
:root {
/* --- Primary Accent (Navy Blue #1F4E8C — ACCENT ONLY) --- */
--md-primary: #1F4E8C;
--md-primary-hover: #2D63B3;
--md-primary-active: #15355F;
--md-primary-container: #E8EDF5;
--md-primary-on: #ffffff;
--md-primary-on-container: #102948;
/* --- Secondary Blue (#2F80ED) --- */
--md-secondary: #2F80ED;
--md-secondary-hover: #2768CC;
--md-secondary-active: #1F51AB;
--md-secondary-container: #E8F0FE;
--md-secondary-on: #ffffff;
--md-secondary-on-container: #173A8A;
/* --- Tertiary (Nhấn - Vàng cam) --- */
--md-tertiary: #F59E0B;
--md-tertiary-hover: #D97706;
--md-tertiary-active: #B45309;
--md-tertiary-container: #FEF3C7;
--md-tertiary-on: #ffffff;
--md-tertiary-on-container: #92400E;
/* --- Error (Lỗi - Đỏ) --- */
--md-error: #EF4444;
--md-error-hover: #DC2626;
--md-error-active: #B91C1C;
--md-error-container: #FEF2F2;
--md-error-on: #ffffff;
--md-error-on-container: #991B1B;
/* --- Sky Blue (#67B7FF) for outlines --- */
--md-sky: #67B7FF;
--md-sky-container: #EAF4FF;
/* --- Surface & Background (Premium Light Blue-toned) --- */
--md-surface: #FFFFFF;
--md-surface-dim: #F6F9FD;
--md-surface-bright: #FFFFFF;
--md-surface-container: #EDF2F8;
--md-surface-container-high: #E7EEF7;
--md-surface-variant: #F3F6FA;
/* --- On-Surface (Chữ trên nền) --- */
--md-on-surface: #1F2937;
--md-on-surface-variant: #64748B;
--md-on-surface-dim: #9CA3AF;
/* --- Outline (Viền) — Blue-toned --- */
--md-outline: #E7EEF7;
--md-outline-variant: #D4DFEC;
--md-outline-focus: #1F4E8C;
/* --- Inverse (Nền tối) --- */
--md-inverse-surface: #1F2937;
--md-inverse-on-surface: #EDF2F8;
--md-inverse-primary: #7894C2;
/* --- Legacy Tokens (tương thích ngược với main.css) --- */
--primary-color: var(--md-primary);
--primary-hover: var(--md-primary-hover);
--secondary-color: var(--md-secondary);
--secondary-hover: var(--md-secondary-hover);
--accent-color: var(--md-tertiary);
--text-dark: var(--md-on-surface);
--text-muted: var(--md-on-surface-variant);
--bg-light: var(--md-surface-variant);
--bg-card: var(--md-surface);
--border-color: var(--md-outline);
}
/* ===========================================================
2. RADIUS TOKENS — Bo góc (Premium Native Mobile)
=========================================================== */
:root {
/* Border Radius Scale — Cards 18px per spec */
--radius-none: 0px;
--radius-xs: 4px;
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 18px; /* Card default */
--radius-xl: 24px;
--radius-full: 9999px;
/* Legacy (tương thích ngược) */
--radius-sm-old: var(--radius-sm);
--radius-md-old: var(--radius-md);
--radius-lg-old: var(--radius-lg);
}
/* ===========================================================
3. ELEVATION TOKENS — Premium Soft Shadows
=========================================================== */
:root {
/* Elevation Scale — Softer, larger blur, lower opacity */
--elevation-0: none;
--elevation-1: 0 1px 2px rgba(0,0,0,0.03), 0 1px 4px rgba(0,0,0,0.02);
--elevation-2: 0 2px 8px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.03);
--elevation-3: 0 4px 16px rgba(0,0,0,0.05), 0 2px 6px rgba(0,0,0,0.03);
--elevation-4: 0 6px 24px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.03);
--elevation-5: 0 12px 40px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04);
--elevation-6: 0 20px 60px rgba(0,0,0,0.10), 0 6px 16px rgba(0,0,0,0.05);
/* Legacy (tương thích ngược) */
--shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.04), 0 1px 4px rgba(0, 0, 0, 0.03);
--shadow-md: 0 6px 24px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
--shadow-lg: var(--elevation-5);
}
/* ===========================================================
4. SPACING TOKENS — Khoảng cách (Compact, 8px grid)
=========================================================== */
:root {
/* Spacing Scale — dựa trên 4px grid (Material Design 3) */
--space-0: 0px;
--space-1: 2px;
--space-2: 4px;
--space-3: 6px;
--space-4: 8px;
--space-5: 10px;
--space-6: 12px;
--space-7: 14px;
--space-8: 16px;
--space-9: 18px;
--space-10: 20px;
--space-12: 24px;
--space-14: 28px;
--space-16: 32px;
--space-20: 40px;
--space-24: 48px;
--space-28: 56px;
--space-32: 64px;
--space-40: 80px;
--space-48: 96px;
--space-56: 112px;
/* Semantic Spacing (dùng trong component) */
--spacing-page: var(--space-4); /* 8px mobile */
--spacing-section: var(--space-4); /* 8px */
--spacing-card-padding: var(--space-8); /* 16px */
--spacing-card-gap: var(--space-6); /* 12px */
--spacing-element-gap: var(--space-4); /* 8px */
--spacing-form-gap: var(--space-8); /* 16px */
--spacing-label-gap: var(--space-3); /* 6px */
--spacing-touch-gap: var(--space-4); /* 8px */
/* Desktop Expansion */
--spacing-page-desktop: var(--space-10); /* 20px */
}
/* ===========================================================
5. TYPOGRAPHY TOKENS — Clean, Modern, Native
=========================================================== */
:root {
/* Font Families */
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
--font-mono: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", monospace;
--font-display: var(--font-sans);
--font-body: var(--font-sans);
/* Font Weights */
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
--weight-extrabold: 800;
--weight-black: 900;
/* Line Heights */
--leading-none: 1;
--leading-tight: 1.15;
--leading-snug: 1.3;
--leading-normal: 1.5;
--leading-relaxed: 1.625;
--leading-loose: 2;
/* Letter Spacing */
--tracking-tight: -0.025em;
--tracking-normal: 0;
--tracking-wide: 0.025em;
--tracking-wider: 0.05em;
/* === TYPE SCALE (Mobile gốc) === */
/* Display Large — Hero */
--typescale-display-large: 2.5rem;
--typescale-display-large-lh: var(--leading-tight);
/* Display Medium — Tiêu đề trang */
--typescale-display-medium: 2rem;
--typescale-display-medium-lh: var(--leading-tight);
/* Display Small — Tiêu đề section */
--typescale-display-small: 1.5rem;
--typescale-display-small-lh: var(--leading-snug);
/* Headline Large — Heading cấp 1 */
--typescale-headline-large: 1.375rem;
--typescale-headline-large-lh: var(--leading-snug);
/* Headline Medium — Heading cấp 2 */
--typescale-headline-medium: 1.25rem;
--typescale-headline-medium-lh: var(--leading-snug);
/* Headline Small — Heading cấp 3 */
--typescale-headline-small: 1.125rem;
--typescale-headline-small-lh: var(--leading-normal);
/* Title Large — Card title */
--typescale-title-large: 1.125rem;
--typescale-title-large-lh: var(--leading-normal);
/* Title Medium — Card subtitle */
--typescale-title-medium: 1rem;
--typescale-title-medium-lh: var(--leading-normal);
/* Title Small — Label nhỏ */
--typescale-title-small: 0.875rem;
--typescale-title-small-lh: var(--leading-normal);
/* Body Large — Nội dung chính */
--typescale-body-large: 1rem;
--typescale-body-large-lh: var(--leading-relaxed);
/* Body Medium — Nội dung phụ */
--typescale-body-medium: 0.875rem;
--typescale-body-medium-lh: var(--leading-relaxed);
/* Body Small — Chú thích */
--typescale-body-small: 0.75rem;
--typescale-body-small-lh: var(--leading-normal);
/* Label Large — Button, Tab */
--typescale-label-large: 0.875rem;
--typescale-label-large-lh: var(--leading-normal);
--typescale-label-large-weight: var(--weight-semibold);
/* Label Medium — Chip, Badge */
--typescale-label-medium: 0.75rem;
--typescale-label-medium-lh: var(--leading-normal);
--typescale-label-medium-weight: var(--weight-medium);
/* Label Small — Caption nhỏ */
--typescale-label-small: 0.625rem;
--typescale-label-small-lh: var(--leading-normal);
--typescale-label-small-weight: var(--weight-medium);
}
/* ===========================================================
6. MOTION TOKENS — Animation & Transition
=========================================================== */
:root {
/* Duration — tất cả animation < 300ms */
--motion-duration-instant: 0ms;
--motion-duration-fast: 100ms;
--motion-duration-normal: 200ms;
--motion-duration-slow: 300ms;
--motion-duration-slower: 400ms;
--motion-duration-slowest: 500ms;
/* Easing — Material Design 3 curves */
--motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
--motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
--motion-easing-decelerate: cubic-bezier(0.0, 0, 0.2, 1);
--motion-easing-accelerate: cubic-bezier(0.4, 0, 1.0, 1);
/* Semantic Motion Tokens */
--motion-hover: var(--motion-duration-fast) var(--motion-easing-standard);
--motion-focus: var(--motion-duration-fast) var(--motion-easing-standard);
--motion-press: var(--motion-duration-instant) var(--motion-easing-standard);
--motion-ripple: var(--motion-duration-normal) var(--motion-easing-standard);
--motion-fade: var(--motion-duration-normal) var(--motion-easing-decelerate);
--motion-slide: var(--motion-duration-slow) var(--motion-easing-standard);
--motion-scale: var(--motion-duration-normal) var(--motion-easing-standard);
--motion-expand: var(--motion-duration-slow) var(--motion-easing-emphasized);
--motion-shared: var(--motion-duration-slower) var(--motion-easing-emphasized);
--motion-hero: var(--motion-duration-slowest) var(--motion-easing-emphasized);
--motion-snackbar: var(--motion-duration-slow) var(--motion-easing-decelerate);
--motion-bottom-sheet: var(--motion-duration-slow) var(--motion-easing-emphasized);
/* Legacy (tương thích ngược) */
--transition-fast: var(--motion-hover);
--transition-normal: var(--motion-fade);
--transition-slow: var(--motion-slide);
}
/* ===========================================================
7. TOUCH TOKENS — Kích thước chạm (App-First)
=========================================================== */
:root {
--touch-target-min: 48px;
--touch-target-sm: 44px;
--touch-target-md: 48px;
--touch-target-lg: 56px;
/* Touch Feedback */
--touch-ripple-duration: var(--motion-ripple);
--touch-ripple-color: rgba(31, 78, 140, 0.12);
--touch-ripple-dark: rgba(255, 255, 255, 0.2);
/* Touch Spacing */
--touch-spacing-min: 8px;
--touch-spacing-safe: 12px;
}
/* ===========================================================
8. LAYOUT TOKENS — Grid & Breakpoints
=========================================================== */
:root {
--bp-xs: 320px;
--bp-sm: 360px;
--bp-md: 390px;
--bp-lg: 414px;
--bp-xl: 480px;
--bp-tab: 768px;
--bp-desk: 1024px;
--bp-wide: 1280px;
--container-mobile: 100%;
--container-tablet: 720px;
--container-desktop: 1100px;
--container-wide: 1200px;
--sticky-header-height: 56px;
--sticky-search-height: 56px;
--sticky-top-offset: 0px;
}
/* ===========================================================
9. COMPONENT TOKENS — Semantic (dùng trực tiếp)
=========================================================== */
:root {
/* --- App Bar / Bottom Navigation --- */
--appbar-height: 56px;
--appbar-bg: var(--md-surface);
--appbar-elevation: var(--elevation-3);
--appbar-icon-size: 24px;
/* --- FAB --- */
--fab-size: 56px;
--fab-icon-size: 24px;
--fab-border-radius: 16px;
--fab-elevation: var(--elevation-5);
--fab-elevation-pressed: var(--elevation-6);
--fab-margin: 16px;
/* --- Card — 18px radius, soft shadow --- */
--card-radius: 18px;
--card-padding: var(--space-8);
--card-gap: var(--space-6);
--card-elevation: var(--elevation-2);
--card-elevation-hover: var(--elevation-4);
--card-bg: var(--md-surface);
--card-border: 1px solid var(--md-outline);
/* --- Bottom Sheet --- */
--bottomsheet-radius: 24px 24px 0 0;
--bottomsheet-padding: var(--spacing-card-padding);
--bottomsheet-handle: 4px;
--bottomsheet-elevation: var(--elevation-5);
/* --- Dialog --- */
--dialog-radius: 24px;
--dialog-padding: var(--spacing-card-padding);
--dialog-elevation: var(--elevation-5);
/* --- Snackbar --- */
--snackbar-radius: var(--radius-sm);
--snackbar-padding: 12px 16px;
--snackbar-bg: var(--md-inverse-surface);
--snackbar-color: var(--md-inverse-on-surface);
--snackbar-elevation: var(--elevation-5);
/* --- Chip --- */
--chip-height: 32px;
--chip-radius: var(--radius-full);
--chip-padding: 0 12px;
--chip-font-size: 0.75rem;
/* --- Search Bar --- */
--search-height: 48px;
--search-radius: 24px;
--search-padding: 0 16px;
--search-elevation: var(--elevation-2);
/* --- Skeleton Loading — Blue-tone shimmer --- */
--skeleton-radius: var(--radius-sm);
--skeleton-bg: #E7EEF7;
--skeleton-shimmer: linear-gradient(90deg, transparent, rgba(47, 128, 237, 0.12), transparent);
/* --- Button --- */
--btn-height: 48px;
--btn-height-sm: 40px;
--btn-radius: 12px;
--btn-font-weight: var(--weight-bold);
}
/* ===========================================================
10. STATE TOKENS — Trạng thái (Status colors)
=========================================================== */
:root {
--status-active: #16A34A;
--status-completed: #1F4E8C;
--status-expired: #F59E0B;
--status-draft: #64748B;
--status-pending: #F97316;
--status-cancelled: #EF4444;
/* Listing Type Colors — Sprint 12.12.7C spec */
--type-passenger: #10B981; /* 🟢 CẦN ĐI XE */
--type-cargo: #F59E0B; /* 🟧 CẦN GỬI HÀNG */
--type-ride-offer: #2F80ED; /* 🔵 XE GHÉP */
--type-cargo-offer: #7C3AED; /* 🟦 XE CHỞ HÀNG */
/* Feedback States */
--state-success: #16A34A;
--state-success-bg: #ECFDF5;
--state-success-text: #065F46;
--state-error: #EF4444;
--state-error-bg: #FEF2F2;
--state-error-text: #991B1B;
--state-warning: #F59E0B;
--state-warning-bg: #FFFBEB;
--state-warning-text: #92400E;
--state-info: #2F80ED;
--state-info-bg: #E8F0FE;
--state-info-text: #1E40AF;
}
/* ===========================================================
11. Z-INDEX TOKENS — Layer stacking
=========================================================== */
:root {
--z-base: 0;
--z-dropdown: 100;
--z-sticky: 200;
--z-navbar: 300;
--z-backdrop: 400;
--z-bottomsheet: 500;
--z-dialog: 600;
--z-snackbar: 700;
--z-tooltip: 800;
--z-loading: 900;
--z-modal: 1000;
--z-toast: 1100;
}
/* ===========================================================
12. KEYFRAME ANIMATIONS — Shared motion definitions
=========================================================== */
@keyframes xos-spin {
to { transform: rotate(360deg); }
}
@keyframes xos-shimmer {
100% { transform: translateX(100%); }
}
@keyframes xos-ripple-anim {
to {
transform: scale(2);
opacity: 0;
}
}
@keyframes xos-fade-in {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes xos-scale-in {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes xos-slide-up {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
/* Responsive utility classes */
.xos-hide-mobile { display: none; }
@media (min-width: 768px) { .xos-hide-mobile { display: initial; } }
.xos-hide-desktop { display: initial; }
@media (min-width: 768px) { .xos-hide-desktop { display: none; } }
.xos-text-center { text-align: center; }
.xos-text-left { text-align: left; }
.xos-text-right { text-align: right; }
/* === END OF TOKENS === */
/*
* ██████ HƯỚNG DẪN SỬ DỤNG ██████
*
* 1. Import tokens.css TRƯỚC main.css trong header.php:
*
*
*
* 2. Sử dụng token thay vì hardcode value:
* ✅ background: var(--md-primary);
* ❌ background: #1F4E8C;
*
* 3. Navy Blue #1F4E8C = ACCENT ONLY (Buttons, CTAs, Selected Tabs).
* DO NOT fill the entire UI with Navy Blue.
*
* 4. Animation luôn <= 300ms:
* ✅ transition: transform var(--motion-duration-normal) var(--motion-easing-standard);
* ❌ transition: transform 0.5s ease;
*/