/* ========================================================================== AVYO DESIGN TOKENS (UI v2) - Màu theo VAI TRÒ (semantic), mỗi vai trò có cặp giá trị Sáng / Tối. - Chế độ: mặc định theo hệ thống (prefers-color-scheme); ép bằng . Khối tối được khai báo 2 lần (data-theme + media query) vì CSS thuần không có cách dùng chung - sửa thì sửa CẢ HAI. - Tầng hiệu năng: tắt kính mờ/bóng nặng (xem fx.js). - Thang teal ĐÃ CHỐT = biến thể A "Ngọc" (2 biến thể B/C chỉ còn trong css/styleguide.css để tham khảo, không dùng trong app). ========================================================================== */ :root { color-scheme: light; /* ---------- Thang màu thương hiệu ---------- */ /* Teal "Ngọc" (biến thể A) */ --teal-50: #f0fdfa; --teal-100: #ccfbf1; --teal-200: #99f6e4; --teal-300: #5eead4; --teal-400: #2dd4bf; --teal-500: #14b8a6; --teal-600: #0d9488; --teal-700: #0f766e; --teal-800: #115e59; --teal-900: #134e4a; --teal-950: #042f2e; /* Cam ấm - điểm nhấn (giá tiền, khuyến mãi, điểm đến) */ --orange-50: #fff7ed; --orange-100: #ffedd5; --orange-200: #fed7aa; --orange-300: #fdba74; --orange-400: #fb923c; --orange-500: #f97316; --orange-600: #ea580c; --orange-700: #c2410c; --orange-800: #9a3412; --orange-900: #7c2d12; /* Trung tính ngả teal ("ink") */ --ink-50: #f5f9f9; --ink-100: #ebf1f2; --ink-200: #dae4e6; --ink-300: #c1d0d3; --ink-400: #93a8ac; --ink-450: #7c9298; /* viền input / nền công tắc tắt: ≈3.2:1 so với trắng (đạt 3:1 cho thành phần UI) */ --ink-500: #546c72; /* chữ mờ: ≥4.8:1 trên cả nền trắng lẫn nền xám nhạt ink-100 */ --ink-600: #435960; --ink-700: #364a4f; --ink-800: #263a3f; --ink-900: #14262a; --ink-950: #0a1a1f; /* ---------- Vai trò màu (SÁNG) ---------- */ --color-primary: var(--teal-700); /* nền nút chính - chữ trắng đạt AA */ --color-primary-hover: var(--teal-800); --color-primary-active: var(--teal-900); --color-on-primary: #ffffff; --color-primary-text: var(--teal-700); /* chữ/icon teal trên nền sáng */ --color-primary-soft: var(--teal-50); /* nền nhạt (chip, hàng chọn) */ --color-primary-soft-2: var(--teal-100); --color-brand: var(--teal-600); /* mảng màu lớn, icon lớn, marker */ --color-brand-bright: var(--teal-500); --color-focus: var(--teal-600); --color-accent: var(--orange-500); /* nền điểm nhấn - kèm chữ tối */ --color-accent-text: var(--orange-700); /* chữ cam trên nền sáng (≥5:1) */ --color-accent-soft: var(--orange-50); --color-accent-soft-2: var(--orange-100); --color-on-accent: #2a1500; --color-bg: var(--ink-50); --color-surface: #ffffff; --color-surface-2: var(--ink-100); --color-surface-3: var(--ink-200); --color-text: var(--ink-900); --color-text-secondary: var(--ink-700); --color-text-muted: var(--ink-500); --color-border: var(--ink-200); --color-border-strong: var(--ink-300); --color-input-border: var(--ink-450); --color-overlay: rgba(10, 26, 31, 0.48); --color-success: #15803d; --color-success-soft: #ecfdf3; --color-success-text: #166534; --color-on-success: #ffffff; --color-danger: #dc2626; --color-danger-hover: #b91c1c; --color-danger-soft: #fef2f2; --color-danger-text: #b91c1c; --color-on-danger: #ffffff; --color-warning: #f59e0b; --color-warning-soft: #fffbeb; --color-warning-text: #92400e; --color-on-warning: #2b1a00; --color-info: #2563eb; --color-info-soft: #eff6ff; --color-info-text: #1d4ed8; --color-on-info: #ffffff; /* Điểm đón / điểm đến - khác nhau cả HÌNH lẫn MÀU */ --color-pickup: var(--teal-600); --color-dest: var(--orange-500); /* Gradient thương hiệu */ --grad-brand: linear-gradient(135deg, var(--teal-600) 0%, var(--teal-800) 100%); --grad-accent: linear-gradient(135deg, var(--orange-400) 0%, var(--orange-600) 100%); /* Nút chính: 2 đầu gradient đều đạt AA với chữ trắng (teal-700 ≈5.5:1, teal-800 ≈7.6:1) */ --grad-primary: linear-gradient(180deg, var(--teal-700) 0%, var(--teal-800) 100%); /* Toast: nền đảo màu so với giao diện để nổi bật */ --color-toast-bg: var(--ink-900); --color-toast-text: #ffffff; /* ---------- Kính mờ (glass) ---------- */ --glass-bg: rgba(255, 255, 255, 0.74); --glass-bg-solid: rgba(255, 255, 255, 0.97); --glass-border: rgba(255, 255, 255, 0.70); --glass-blur: 18px; --glass-sat: 160%; /* ---------- Bóng đổ (ngả teal, không dùng đen thuần) ---------- */ --shadow-color: 9, 44, 48; --shadow-1: 0 1px 2px rgba(var(--shadow-color), .07), 0 1px 1px rgba(var(--shadow-color), .04); --shadow-2: 0 4px 12px -2px rgba(var(--shadow-color), .12), 0 2px 4px rgba(var(--shadow-color), .05); --shadow-3: 0 12px 28px -6px rgba(var(--shadow-color), .20), 0 4px 8px rgba(var(--shadow-color), .06); --shadow-4: 0 24px 48px -12px rgba(var(--shadow-color), .30), 0 8px 16px rgba(var(--shadow-color), .08); --shadow-primary: 0 8px 20px -6px rgba(15, 118, 110, .55); --shadow-accent: 0 8px 20px -6px rgba(234, 88, 12, .50); --shadow-inset-hi: inset 0 1px 0 rgba(255, 255, 255, .18); /* ---------- Bản đồ giả lập (dùng trong style guide/illustrations) ---------- */ --map-bg: #f4f4f0; --map-road: #ffffff; --map-road-major: #fdfdfc; --map-road-edge: #e0e0da; --map-park: #e3ecdf; --map-water: #d3e3ec; --map-block: #eceae5; --map-label: #7a8083; --map-land: #f6f6f2; /* màu đất chủ đạo của Mapbox light-v11 (nền vùng chưa tải kịp) */ /* ---------- Minh họa (illustrations) ---------- */ --art-bg: var(--teal-50); --art-soft: var(--teal-100); --art-mid: var(--teal-300); --art-strong: var(--teal-600); --art-deep: var(--teal-800); --art-ink: var(--ink-800); --art-accent: var(--orange-500); --art-accent-soft: var(--orange-200); --art-white: #ffffff; /* ---------- Chữ ---------- */ --font-sans: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --fs-xs: 12px; --fs-sm: 14px; --fs-base: 16px; --fs-md: 18px; --fs-lg: 20px; --fs-xl: 24px; --fs-2xl: 30px; --fs-3xl: 36px; --fs-4xl: 48px; --lh-tight: 1.2; --lh-snug: 1.35; --lh-body: 1.55; /* ---------- Khoảng cách (lưới 4px) ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* ---------- Bo góc ---------- */ --radius-xs: 6px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-sheet: 28px; --radius-full: 9999px; /* ---------- Kích thước điều khiển ---------- */ --control-sm: 36px; --control-md: 44px; --control-lg: 52px; /* nút chính trên mobile ≥ 48px */ --touch-min: 48px; /* ---------- Chuyển động ---------- */ --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; --dur-slower: 500ms; --ease-standard: cubic-bezier(.2, 0, 0, 1); --ease-spring: cubic-bezier(.16, 1, .3, 1); --ease-overshoot: cubic-bezier(.34, 1.56, .64, 1); --ease-in: cubic-bezier(.4, 0, 1, 1); } /* ========================================================================== CHẾ ĐỘ TỐI - bộ token RIÊNG (không đảo màu máy móc) Nền không dùng đen tuyệt đối, chữ không dùng trắng tuyệt đối; nút chính đổi sang teal SÁNG kèm chữ TỐI để giữ tương phản. ========================================================================== */ [data-theme="dark"] { /* áp được cho cả lẫn từng khung riêng (vd. mockup app tài xế) */ color-scheme: dark; --color-primary: var(--teal-400); --color-primary-hover: var(--teal-300); --color-primary-active: var(--teal-200); --color-on-primary: var(--teal-950); --color-primary-text: var(--teal-300); --color-primary-soft: rgba(45, 212, 191, .14); --color-primary-soft-2: rgba(45, 212, 191, .22); --color-brand: var(--teal-400); --color-brand-bright: var(--teal-300); --color-focus: var(--teal-300); --color-accent: var(--orange-500); --color-accent-text: var(--orange-300); --color-accent-soft: rgba(249, 115, 22, .16); --color-accent-soft-2: rgba(249, 115, 22, .26); --color-on-accent: #2a1500; --color-bg: #0a1a1f; --color-surface: #10262c; --color-surface-2: #163137; --color-surface-3: #1d3d44; --color-text: #e6f4f1; --color-text-secondary: #b9d0cd; --color-text-muted: #94adab; --color-border: rgba(255, 255, 255, .10); --color-border-strong: rgba(255, 255, 255, .20); --color-input-border: rgba(255, 255, 255, .42); --color-overlay: rgba(2, 10, 12, .62); --color-success: #4ade80; --color-success-soft: rgba(74, 222, 128, .14); --color-success-text: #86efac; --color-on-success: #052e13; --color-danger: #f87171; --color-danger-hover: #fca5a5; --color-danger-soft: rgba(248, 113, 113, .14); --color-danger-text: #fca5a5; --color-on-danger: #2a0606; --color-warning: #fbbf24; --color-warning-soft: rgba(251, 191, 36, .14); --color-warning-text: #fcd34d; --color-on-warning: #2b1a00; --color-info: #60a5fa; --color-info-soft: rgba(96, 165, 250, .14); --color-info-text: #93c5fd; --color-on-info: #04122b; --color-pickup: var(--teal-400); --color-dest: var(--orange-400); --grad-brand: linear-gradient(135deg, var(--teal-400) 0%, var(--teal-600) 100%); --grad-primary: linear-gradient(180deg, var(--teal-300) 0%, var(--teal-400) 100%); --color-toast-bg: #1d3d44; --color-toast-text: #e6f4f1; --glass-bg: rgba(16, 38, 44, 0.72); --glass-bg-solid: rgba(16, 38, 44, 0.97); --glass-border: rgba(255, 255, 255, 0.09); --shadow-color: 0, 0, 0; --shadow-1: 0 1px 2px rgba(0, 0, 0, .40); --shadow-2: 0 4px 12px -2px rgba(0, 0, 0, .50), 0 2px 4px rgba(0, 0, 0, .30); --shadow-3: 0 12px 28px -6px rgba(0, 0, 0, .60), 0 4px 8px rgba(0, 0, 0, .30); --shadow-4: 0 24px 48px -12px rgba(0, 0, 0, .70), 0 8px 16px rgba(0, 0, 0, .35); --shadow-primary: 0 8px 22px -8px rgba(45, 212, 191, .55); --shadow-accent: 0 8px 22px -8px rgba(249, 115, 22, .55); --shadow-inset-hi: inset 0 1px 0 rgba(255, 255, 255, .22); --map-bg: #282828; --map-road: #363839; --map-road-major: #414445; --map-road-edge: #1f2021; --map-park: #2a322c; --map-water: #1f2b33; --map-block: #2e2f30; --map-label: #8b9295; --map-land: #282828; /* Mapbox dark-v11 */ --art-bg: #10262c; --art-soft: #163137; --art-mid: var(--teal-700); --art-strong: var(--teal-400); --art-deep: var(--teal-300); --art-ink: #e6f4f1; --art-accent: var(--orange-500); --art-accent-soft: #6b3410; --art-white: #e6f4f1; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --color-primary: var(--teal-400); --color-primary-hover: var(--teal-300); --color-primary-active: var(--teal-200); --color-on-primary: var(--teal-950); --color-primary-text: var(--teal-300); --color-primary-soft: rgba(45, 212, 191, .14); --color-primary-soft-2: rgba(45, 212, 191, .22); --color-brand: var(--teal-400); --color-brand-bright: var(--teal-300); --color-focus: var(--teal-300); --color-accent: var(--orange-500); --color-accent-text: var(--orange-300); --color-accent-soft: rgba(249, 115, 22, .16); --color-accent-soft-2: rgba(249, 115, 22, .26); --color-on-accent: #2a1500; --color-bg: #0a1a1f; --color-surface: #10262c; --color-surface-2: #163137; --color-surface-3: #1d3d44; --color-text: #e6f4f1; --color-text-secondary: #b9d0cd; --color-text-muted: #94adab; --color-border: rgba(255, 255, 255, .10); --color-border-strong: rgba(255, 255, 255, .20); --color-input-border: rgba(255, 255, 255, .42); --color-overlay: rgba(2, 10, 12, .62); --color-success: #4ade80; --color-success-soft: rgba(74, 222, 128, .14); --color-success-text: #86efac; --color-on-success: #052e13; --color-danger: #f87171; --color-danger-hover: #fca5a5; --color-danger-soft: rgba(248, 113, 113, .14); --color-danger-text: #fca5a5; --color-on-danger: #2a0606; --color-warning: #fbbf24; --color-warning-soft: rgba(251, 191, 36, .14); --color-warning-text: #fcd34d; --color-on-warning: #2b1a00; --color-info: #60a5fa; --color-info-soft: rgba(96, 165, 250, .14); --color-info-text: #93c5fd; --color-on-info: #04122b; --color-pickup: var(--teal-400); --color-dest: var(--orange-400); --grad-brand: linear-gradient(135deg, var(--teal-400) 0%, var(--teal-600) 100%); --grad-primary: linear-gradient(180deg, var(--teal-300) 0%, var(--teal-400) 100%); --color-toast-bg: #1d3d44; --color-toast-text: #e6f4f1; --glass-bg: rgba(16, 38, 44, 0.72); --glass-bg-solid: rgba(16, 38, 44, 0.97); --glass-border: rgba(255, 255, 255, 0.09); --shadow-color: 0, 0, 0; --shadow-1: 0 1px 2px rgba(0, 0, 0, .40); --shadow-2: 0 4px 12px -2px rgba(0, 0, 0, .50), 0 2px 4px rgba(0, 0, 0, .30); --shadow-3: 0 12px 28px -6px rgba(0, 0, 0, .60), 0 4px 8px rgba(0, 0, 0, .30); --shadow-4: 0 24px 48px -12px rgba(0, 0, 0, .70), 0 8px 16px rgba(0, 0, 0, .35); --shadow-primary: 0 8px 22px -8px rgba(45, 212, 191, .55); --shadow-accent: 0 8px 22px -8px rgba(249, 115, 22, .55); --shadow-inset-hi: inset 0 1px 0 rgba(255, 255, 255, .22); --map-bg: #282828; --map-road: #363839; --map-road-major: #414445; --map-road-edge: #1f2021; --map-park: #2a322c; --map-water: #1f2b33; --map-block: #2e2f30; --map-label: #8b9295; --map-land: #282828; /* Mapbox dark-v11 */ --art-bg: #10262c; --art-soft: #163137; --art-mid: var(--teal-700); --art-strong: var(--teal-400); --art-deep: var(--teal-300); --art-ink: #e6f4f1; --art-accent: var(--orange-500); --art-accent-soft: #6b3410; --art-white: #e6f4f1; } } /* ========================================================================== TẦNG HIỆU NĂNG: máy yếu -> bỏ kính mờ (nền đặc) và bóng nhiều lớp ========================================================================== */ :root[data-perf="low"] { --glass-blur: 0px; --glass-sat: 100%; --glass-bg: var(--glass-bg-solid); }