/** * ============================================================ * GCC DESIGN TOKENS — gcc-tokens.css * File: wp-content/plugins/greeting-card-creator/assets/css/gcc-tokens.css * * File DUY NHẤT chứa toàn bộ design variables. * Không có class, không selector nào ngoài :root. * Mọi module chỉ cần: * wp_enqueue_style( 'gcc-xyz', ..., ['gcc-tokens'], GCC_VERSION ); * rồi dùng var(--gcc-*) tự do trong CSS của module đó. * * Đổi tone / brand toàn hệ thống → chỉ sửa file này. * * ┌─────────────────────────────────────────────────────────┐ * │ PALETTE — Tối giản 4 tông │ * │ │ * │ ĐEN #000000 → #0a0a0a → #141414 → #1f1f1f │ * │ XÁM #2a2a2a → #3d3d3d → #525252 → #6b6b6b │ * │ GHI #878787 → #a0a0a0 → #b8b8b8 → #d0d0d0 │ * │ TRẮNG #e4e4e4 → #f0f0f0 → #f7f7f7 → #ffffff │ * │ │ * │ Mỗi tông đều có: base · hover · active · disabled │ * └─────────────────────────────────────────────────────────┘ * * @package GreetingCardCreator * @version 2.2.0 * ============================================================ * * TABLE OF CONTENTS * 0. Color Palette — Raw stops (đen · xám · ghi · trắng) * 1. Color — Ink (text, icon) * 2. Color — Surface (background, panel, card) * 3. Color — Line (border, divider) * 4. Color — Brand / Gradient * 5. Color — Interactive States (hover · active · focus · disabled) * 6. Color — Accent (tối giản) * 7. Color — Status (success, warning, error, info) * 8. Color — Overlay / Scrim * 9. Typography — Font Family * 10. Typography — Font Size * 11. Typography — Font Weight * 12. Typography — Line Height * 13. Typography — Letter Spacing * 14. Spacing * 15. Border Radius * 16. Border Width * 17. Shadow * 18. Ring / Focus * 19. Animation — Easing * 20. Animation — Duration * 21. Animation — Shorthand * 22. Z-Index * 23. Layout — Container & Panel * 24. Layout — Component Sizing * 25. Grid * 26. Opacity * 27. Cursor * 28. Scrollbar * 29. Backdrop / Blur / Glass * 30. Dark Mode overrides * 31. Alias / Compat * ============================================================ */ /* ============================================================ 0. COLOR PALETTE — RAW STOPS Bảng gốc: 4 tông × nhiều bước Dùng trực tiếp trong token section bên dưới, KHÔNG dùng thẳng trong component CSS — dùng token alias. ============================================================ */ :root { /* ── ĐEN ──────────────────────────────────────────────── */ --gcc-black-50: #000000; /* Đen tuyệt đối */ --gcc-black-100: #0a0a0a; /* Đen sâu */ --gcc-black-200: #141414; /* Đen panel */ --gcc-black-300: #1f1f1f; /* Đen heading chính */ --gcc-black-400: #2a2a2a; /* Đen body */ /* ── XÁM ──────────────────────────────────────────────── */ --gcc-gray-100: #3d3d3d; /* Xám đậm */ --gcc-gray-200: #525252; /* Xám trung */ --gcc-gray-300: #6b6b6b; /* Xám nhạt */ --gcc-gray-400: #7a7a7a; /* Xám muted */ /* ── GHI ──────────────────────────────────────────────── */ --gcc-ghi-100: #878787; /* Ghi đậm */ --gcc-ghi-200: #a0a0a0; /* Ghi trung */ --gcc-ghi-300: #b8b8b8; /* Ghi nhạt */ --gcc-ghi-400: #d0d0d0; /* Ghi rất nhạt */ /* ── TRẮNG ────────────────────────────────────────────── */ --gcc-white-100: #e4e4e4; /* Trắng ngà */ --gcc-white-200: #eeeeee; /* Trắng xám */ --gcc-white-300: #f4f4f4; /* Trắng panel */ --gcc-white-400: #f9f9f9; /* Trắng nền */ --gcc-white-500: #ffffff; /* Trắng tinh */ } /* ============================================================ 1. COLOR — INK Dùng cho: text, label, icon, border quan trọng ============================================================ */ :root { --gcc-ink-strong: var(--gcc-black-300); /* #1f1f1f — Heading, label chính */ --gcc-ink: var(--gcc-black-400); /* #2a2a2a — Body text mặc định */ --gcc-ink-secondary: var(--gcc-gray-100); /* #3d3d3d — Sub-heading, tab label */ --gcc-ink-muted: var(--gcc-gray-200); /* #525252 — Placeholder, caption */ --gcc-ink-faint: var(--gcc-ghi-100); /* #878787 — Disabled text, hint */ --gcc-ink-ghost: var(--gcc-ghi-300); /* #b8b8b8 — Skeleton label, cực nhạt */ --gcc-ink-inverse: var(--gcc-white-500); /* #ffffff — Text trên nền tối */ --gcc-ink-inverse-muted: var(--gcc-ghi-400); /* #d0d0d0 — Sub-text trên nền tối */ /* ── Hover states ─────────────────────────────────────── */ --gcc-ink-strong-hover: var(--gcc-black-50); /* #000000 — Heading hover */ --gcc-ink-hover: var(--gcc-black-300); /* #1f1f1f — Body hover */ --gcc-ink-secondary-hover: var(--gcc-black-400); /* #2a2a2a — Sub hover */ --gcc-ink-muted-hover: var(--gcc-gray-100); /* #3d3d3d — Muted hover */ --gcc-ink-inverse-hover: var(--gcc-white-300); /* #f4f4f4 — Inverse hover */ } /* ============================================================ 2. COLOR — SURFACE Dùng cho: nền trang, panel, card, input background, hover ============================================================ */ :root { --gcc-surface: var(--gcc-white-500); /* #ffffff — Nền trắng cơ bản */ --gcc-surface-1: var(--gcc-white-400); /* #f9f9f9 — Panel, sidebar, input bg */ --gcc-surface-2: var(--gcc-white-300); /* #f4f4f4 — Card nổi */ --gcc-surface-3: var(--gcc-white-200); /* #eeeeee — Nested panel, skeleton bg */ --gcc-surface-4: var(--gcc-white-100); /* #e4e4e4 — Divider bg, deep nested */ --gcc-surface-raised: var(--gcc-white-500); /* #ffffff — Card có shadow */ --gcc-surface-sunken: var(--gcc-white-300); /* #f4f4f4 — Nền thụt vào */ --gcc-surface-dark: var(--gcc-black-200); /* #141414 — Dark panel */ --gcc-surface-dark-1: var(--gcc-black-300); /* #1f1f1f */ --gcc-surface-dark-2: var(--gcc-black-400); /* #2a2a2a */ /* ── Hover states ─────────────────────────────────────── */ --gcc-surface-hover: var(--gcc-white-300); /* #f4f4f4 — Row hover trên nền trắng */ --gcc-surface-1-hover: var(--gcc-white-200); /* #eeeeee — Panel hover */ --gcc-surface-2-hover: var(--gcc-white-100); /* #e4e4e4 — Card hover */ --gcc-surface-3-hover: var(--gcc-ghi-400); /* #d0d0d0 — Nested hover */ --gcc-surface-dark-hover: var(--gcc-black-300); /* #1f1f1f — Dark hover */ --gcc-surface-dark-1-hover: var(--gcc-black-400); /* #2a2a2a */ /* ── Active (pressed) ─────────────────────────────────── */ --gcc-surface-active: var(--gcc-white-200); /* #eeeeee — Pressed trên nền trắng */ --gcc-surface-dark-active: var(--gcc-gray-100); /* #3d3d3d — Pressed trên nền tối */ } /* ============================================================ 3. COLOR — LINE Dùng cho: border, separator, divider, table border v2.2.0: Line scale nhạt, không đen → dải #EEEEEE → #CCCCCC → #AAAAAA → #888888 Trên nền trắng vẫn rõ ràng nhưng thanh lịch, không nặng nề. ============================================================ */ :root { --gcc-line-faint: #EEEEEE; /* Separator cực mờ — chia vùng nhẹ nhất */ --gcc-line-light: #DDDDDD; /* Divider nhạt — card, panel, section */ --gcc-line: #CCCCCC; /* Border mặc định — input, table, component */ --gcc-line-strong: #BBBBBB; /* Border nổi — focus ring nhẹ, header table */ --gcc-line-dark: #AAAAAA; /* Border đậm — active state, pressed */ --gcc-line-inverse: #888888; /* Border trên nền tối — Silver-Gray tone */ /* ── Hover states ─────────────────────────────────────── */ --gcc-line-hover: #BBBBBB; /* Border hover — nhích lên 1 bậc */ --gcc-line-strong-hover: #999999; /* Border strong hover */ --gcc-line-inverse-hover: #777777; /* Inverse border hover — trên dark panel */ } /* ============================================================ 4. COLOR — BRAND / GRADIENT Dùng cho: button primary, badge, progress bar, CTA Scale: đen → xám → ghi → trắng ============================================================ */ :root { /* ── Brand scale ───────────────────────────────────────── */ --gcc-brand-50: var(--gcc-white-300); /* #f4f4f4 — Tint cực nhạt */ --gcc-brand-100: var(--gcc-white-100); /* #e4e4e4 */ --gcc-brand-200: var(--gcc-ghi-400); /* #d0d0d0 */ --gcc-brand-300: var(--gcc-ghi-300); /* #b8b8b8 */ --gcc-brand-400: var(--gcc-ghi-200); /* #a0a0a0 */ --gcc-brand-500: var(--gcc-ghi-100); /* #878787 — Mid brand */ --gcc-brand-600: var(--gcc-gray-300); /* #6b6b6b */ --gcc-brand-700: var(--gcc-gray-200); /* #525252 — Brand chính */ --gcc-brand-800: var(--gcc-gray-100); /* #3d3d3d — Brand đậm */ --gcc-brand-900: var(--gcc-black-300); /* #1f1f1f */ --gcc-brand-950: var(--gcc-black-100); /* #0a0a0a — Brand cực đậm */ /* ── GRADIENT — ĐEN (dark CTA, hero) ─────────────────── */ --gcc-grad-black: linear-gradient(135deg, #000000 0%, #2a2a2a 100%); --gcc-grad-black-hover: linear-gradient(135deg, #0a0a0a 0%, #3d3d3d 100%); --gcc-grad-black-active: linear-gradient(135deg, #000000 0%, #141414 100%); --gcc-grad-black-disabled: linear-gradient(135deg, #6b6b6b 0%, #a0a0a0 100%); /* ── GRADIENT — XÁM (secondary CTA) ──────────────────── */ --gcc-grad-gray: linear-gradient(135deg, #2a2a2a 0%, #525252 100%); --gcc-grad-gray-hover: linear-gradient(135deg, #1f1f1f 0%, #3d3d3d 100%); --gcc-grad-gray-active: linear-gradient(135deg, #141414 0%, #2a2a2a 100%); --gcc-grad-gray-disabled: linear-gradient(135deg, #878787 0%, #b8b8b8 100%); /* ── GRADIENT — GHI (soft / muted CTA) ───────────────── */ --gcc-grad-ghi: linear-gradient(135deg, #6b6b6b 0%, #a0a0a0 100%); --gcc-grad-ghi-hover: linear-gradient(135deg, #525252 0%, #878787 100%); --gcc-grad-ghi-active: linear-gradient(135deg, #3d3d3d 0%, #6b6b6b 100%); --gcc-grad-ghi-disabled: linear-gradient(135deg, #b8b8b8 0%, #d0d0d0 100%); /* ── GRADIENT — TRẮNG (inverse / light CTA) ───────────── */ --gcc-grad-white: linear-gradient(135deg, #f4f4f4 0%, #ffffff 100%); --gcc-grad-white-hover: linear-gradient(135deg, #e4e4e4 0%, #f9f9f9 100%); --gcc-grad-white-active: linear-gradient(135deg, #d0d0d0 0%, #eeeeee 100%); --gcc-grad-white-disabled: linear-gradient(135deg, #f9f9f9 0%, #ffffff 100%); /* ── GRADIENT — PRIMARY (đen → xám, dùng cho CTA chính) ── */ --gcc-grad-primary: linear-gradient(135deg, #1f1f1f 0%, #525252 100%); --gcc-grad-primary-hover: linear-gradient(135deg, #000000 0%, #3d3d3d 100%); --gcc-grad-primary-active: linear-gradient(135deg, #000000 0%, #2a2a2a 100%); --gcc-grad-primary-disabled: linear-gradient(135deg, #878787 0%, #b8b8b8 100%); /* ── GRADIENT — SECONDARY (xám → ghi) ─────────────────── */ --gcc-grad-secondary: linear-gradient(135deg, #3d3d3d 0%, #878787 100%); --gcc-grad-secondary-hover: linear-gradient(135deg, #2a2a2a 0%, #6b6b6b 100%); --gcc-grad-secondary-active: linear-gradient(135deg, #1f1f1f 0%, #525252 100%); --gcc-grad-secondary-disabled: linear-gradient(135deg, #a0a0a0 0%, #d0d0d0 100%); /* ── GRADIENT — SUBTLE (ghi → trắng, nền nhẹ) ─────────── */ --gcc-grad-subtle: linear-gradient(135deg, #d0d0d0 0%, #ffffff 100%); --gcc-grad-subtle-hover: linear-gradient(135deg, #b8b8b8 0%, #f4f4f4 100%); --gcc-grad-subtle-active: linear-gradient(135deg, #a0a0a0 0%, #eeeeee 100%); /* ── GRADIENT — SURFACE (nền trang) ─────────────────────── */ --gcc-grad-surface: linear-gradient(180deg, #ffffff 0%, #f4f4f4 100%); --gcc-grad-surface-alt: linear-gradient(135deg, #f9f9f9 0%, #eeeeee 100%); /* ── GRADIENT — HERO (banner, cover) ────────────────────── */ --gcc-grad-hero: linear-gradient(135deg, #000000 0%, #2a2a2a 50%, #000000 100%); --gcc-grad-hero-hover: linear-gradient(135deg, #0a0a0a 0%, #3d3d3d 50%, #0a0a0a 100%); /* ── GRADIENT — FADE overlay ────────────────────────────── */ --gcc-grad-fade-down: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 100%); --gcc-grad-fade-up: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 100%); --gcc-grad-fade-white-down: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #ffffff 100%); /* ── Skeleton shimmer ────────────────────────────────────── */ --gcc-grad-skeleton: linear-gradient(90deg, #e4e4e4 0%, #f4f4f4 50%, #e4e4e4 100%); --gcc-grad-skeleton-dark: linear-gradient(90deg, #2a2a2a 0%, #3d3d3d 50%, #2a2a2a 100%); /* ── Refs nhanh ─────────────────────────────────────────── */ --gcc-brand-from: #1f1f1f; --gcc-brand-to: #525252; } /* ============================================================ 5. COLOR — INTERACTIVE STATES Token chuyên dụng cho hover · active · focus · disabled Áp dụng nhất quán trên button, link, input, card, row, nav ============================================================ */ :root { /* ── Button — Đen (primary dark) ─────────────────────── */ --gcc-btn-black-bg: #1f1f1f; --gcc-btn-black-bg-hover: #000000; --gcc-btn-black-bg-active: #000000; --gcc-btn-black-bg-disabled: #6b6b6b; --gcc-btn-black-text: #ffffff; --gcc-btn-black-text-hover: #ffffff; --gcc-btn-black-border: #000000; --gcc-btn-black-border-hover: #000000; --gcc-btn-black-shadow-hover: 0 4px 16px rgba(0,0,0,0.40); --gcc-btn-black-shadow-active: 0 1px 4px rgba(0,0,0,0.40); /* ── Button — Xám (secondary) ────────────────────────── */ --gcc-btn-gray-bg: #3d3d3d; --gcc-btn-gray-bg-hover: #2a2a2a; --gcc-btn-gray-bg-active: #1f1f1f; --gcc-btn-gray-bg-disabled: #a0a0a0; --gcc-btn-gray-text: #ffffff; --gcc-btn-gray-text-hover: #ffffff; --gcc-btn-gray-border: #3d3d3d; --gcc-btn-gray-border-hover: #2a2a2a; --gcc-btn-gray-shadow-hover: 0 4px 14px rgba(0,0,0,0.28); /* ── Button — Ghi (ghost / outline) ──────────────────── */ --gcc-btn-ghi-bg: transparent; --gcc-btn-ghi-bg-hover: #f4f4f4; --gcc-btn-ghi-bg-active: #e4e4e4; --gcc-btn-ghi-bg-disabled: transparent; --gcc-btn-ghi-text: #525252; --gcc-btn-ghi-text-hover: #1f1f1f; --gcc-btn-ghi-text-disabled: #b8b8b8; --gcc-btn-ghi-border: #CCCCCC; /* v2.2.0: nhạt xuống */ --gcc-btn-ghi-border-hover: #AAAAAA; /* Hover nhích lên nhẹ */ --gcc-btn-ghi-border-disabled: #EEEEEE; /* Disabled rất nhạt */ /* ── Button — Trắng (inverse, trên nền tối) ──────────── */ --gcc-btn-white-bg: #ffffff; --gcc-btn-white-bg-hover: #f4f4f4; --gcc-btn-white-bg-active: #e4e4e4; --gcc-btn-white-bg-disabled: #d0d0d0; --gcc-btn-white-text: #1f1f1f; --gcc-btn-white-text-hover: #000000; --gcc-btn-white-border: #ffffff; --gcc-btn-white-border-hover: #e4e4e4; --gcc-btn-white-shadow-hover: 0 4px 16px rgba(255,255,255,0.20); /* ── Link ─────────────────────────────────────────────── */ /* v2.2.0: Chuyển link sang xanh chuyên nghiệp (#2563eb family) → Phân biệt rõ với text thường, chuẩn UX/accessibility */ --gcc-link: #2563eb; /* Xanh link chuẩn — dễ nhận biết */ --gcc-link-hover: #1d4ed8; /* Đậm hơn khi hover */ --gcc-link-active: #1e40af; /* Pressed — xanh navy */ --gcc-link-visited: #7c3aed; /* Đã thăm — tím nhạt, chuẩn browser convention */ --gcc-link-disabled: #93c5fd; /* Xanh nhạt khi disabled */ --gcc-link-subtle: #3b82f6; /* Link ít nhấn mạnh — xanh sáng hơn */ --gcc-link-subtle-hover: #2563eb; /* Subtle hover */ /* ── Input ────────────────────────────────────────────── */ --gcc-input-bg: #ffffff; --gcc-input-bg-hover: #f9f9f9; --gcc-input-bg-focus: #ffffff; --gcc-input-bg-disabled: #f4f4f4; --gcc-input-border: #CCCCCC; /* v2.2.0: nhạt xuống — không đen nữa */ --gcc-input-border-hover: #AAAAAA; /* Hover — xám trung nhẹ */ --gcc-input-border-focus: #2563eb; /* Focus — xanh rõ, dễ nhận biết (a11y) */ --gcc-input-border-error: #dc2626; --gcc-input-border-disabled: #EEEEEE; /* Disabled — rất nhạt */ --gcc-input-text: #1f1f1f; --gcc-input-placeholder: #a0a0a0; /* ── Row / List item ──────────────────────────────────── */ --gcc-row-bg: transparent; --gcc-row-bg-hover: #f9f9f9; --gcc-row-bg-active: #f4f4f4; --gcc-row-bg-selected: #eeeeee; --gcc-row-border-hover: #DDDDDD; /* v2.2.0: nhạt xuống */ /* ── Card ─────────────────────────────────────────────── */ --gcc-card-bg: #ffffff; --gcc-card-bg-hover: #f9f9f9; --gcc-card-bg-active: #f4f4f4; --gcc-card-border: #DDDDDD; /* v2.2.0: nhạt, thanh lịch */ --gcc-card-border-hover: #BBBBBB; /* Hover — nhích lên nhẹ */ --gcc-card-shadow: 0 2px 8px rgba(0,0,0,0.06); --gcc-card-shadow-hover: 0 6px 20px rgba(0,0,0,0.12); --gcc-card-shadow-active: 0 2px 6px rgba(0,0,0,0.10); /* ── Nav / Tab ────────────────────────────────────────── */ --gcc-nav-bg: transparent; --gcc-nav-bg-hover: #f4f4f4; --gcc-nav-bg-active: #eeeeee; --gcc-nav-bg-selected: #1f1f1f; --gcc-nav-text: #525252; --gcc-nav-text-hover: #1f1f1f; --gcc-nav-text-active: #000000; --gcc-nav-text-selected: #ffffff; --gcc-nav-border-selected: #000000; /* ── Badge / Tag ──────────────────────────────────────── */ --gcc-badge-bg: #f4f4f4; --gcc-badge-bg-hover: #e4e4e4; --gcc-badge-text: #3d3d3d; --gcc-badge-border: #DDDDDD; /* v2.2.0: nhạt xuống */ --gcc-badge-dark-bg: #1f1f1f; --gcc-badge-dark-bg-hover: #000000; --gcc-badge-dark-text: #ffffff; /* ── Toggle / Checkbox ───────────────────────────────── */ --gcc-toggle-off-bg: #d0d0d0; --gcc-toggle-off-bg-hover: #b8b8b8; --gcc-toggle-on-bg: #1f1f1f; --gcc-toggle-on-bg-hover: #000000; --gcc-toggle-thumb: #ffffff; /* ── Gradient hover shorthand ────────────────────────── */ --gcc-grad-hover-lift: 0 8px 24px rgba(0,0,0,0.20); --gcc-grad-hover-lift-lg: 0 16px 40px rgba(0,0,0,0.28); } /* ============================================================ 6. COLOR — ACCENT Tối giản: chỉ dùng 4 tông gốc ============================================================ */ :root { /* Accent chính (đen) */ --gcc-accent: #1f1f1f; --gcc-accent-bg: #f4f4f4; --gcc-accent-border: #DDDDDD; /* v2.2.0: nhạt xuống */ --gcc-accent-hover: #000000; --gcc-accent-bg-hover: #e4e4e4; /* Accent muted (ghi) */ --gcc-accent-muted: #878787; --gcc-accent-muted-bg: #f9f9f9; --gcc-accent-muted-border: #EEEEEE; /* v2.2.0: nhạt xuống */ --gcc-accent-muted-hover: #525252; /* Accent inverse (trên nền tối) */ --gcc-accent-inverse: #ffffff; --gcc-accent-inverse-bg: #2a2a2a; --gcc-accent-inverse-border: #3d3d3d; --gcc-accent-inverse-hover: #f4f4f4; } /* ============================================================ 7. COLOR — STATUS Giữ màu chức năng (green / amber / red / blue). Chúng mang ngữ nghĩa — không thay bằng xám/ghi. ============================================================ */ :root { /* ── Success ───────────────────────────── */ --gcc-success: #16a34a; --gcc-success-light: #22c55e; --gcc-success-bg: #f0fdf4; --gcc-success-bg-strong: #dcfce7; --gcc-success-border: #bbf7d0; --gcc-success-text: #15803d; --gcc-success-hover: #15803d; --gcc-success-bg-hover: #dcfce7; /* ── Warning ───────────────────────────── */ --gcc-warning: #d97706; --gcc-warning-light: #f59e0b; --gcc-warning-bg: #fffbeb; --gcc-warning-bg-strong: #fef3c7; --gcc-warning-border: #fde68a; --gcc-warning-text: #b45309; --gcc-warning-hover: #b45309; --gcc-warning-bg-hover: #fef3c7; /* ── Error ─────────────────────────────── */ --gcc-error: #dc2626; --gcc-error-light: #ef4444; --gcc-error-bg: #fef2f2; --gcc-error-bg-strong: #fee2e2; --gcc-error-border: #fecaca; --gcc-error-text: #b91c1c; --gcc-error-hover: #b91c1c; --gcc-error-bg-hover: #fee2e2; /* ── Info ──────────────────────────────── */ --gcc-info: #2563eb; --gcc-info-light: #3b82f6; --gcc-info-bg: #eff6ff; --gcc-info-bg-strong: #dbeafe; --gcc-info-border: #bfdbfe; --gcc-info-text: #1d4ed8; --gcc-info-hover: #1d4ed8; --gcc-info-bg-hover: #dbeafe; /* ── Neutral ───────────────────────────── */ --gcc-neutral: var(--gcc-gray-200); /* #525252 */ --gcc-neutral-bg: var(--gcc-white-400); /* #f9f9f9 */ --gcc-neutral-border: var(--gcc-ghi-400); /* #d0d0d0 */ --gcc-neutral-text: var(--gcc-gray-100); /* #3d3d3d */ --gcc-neutral-hover: var(--gcc-gray-100); --gcc-neutral-bg-hover: var(--gcc-white-300); /* #f4f4f4 */ } /* ============================================================ 8. COLOR — OVERLAY / SCRIM ============================================================ */ :root { --gcc-overlay-xs: rgba(0,0,0,0.04); --gcc-overlay-sm: rgba(0,0,0,0.10); --gcc-overlay: rgba(0,0,0,0.40); --gcc-overlay-md: rgba(0,0,0,0.55); --gcc-overlay-lg: rgba(0,0,0,0.72); --gcc-overlay-dark: rgba(0,0,0,0.88); --gcc-overlay-white-sm: rgba(255,255,255,0.12); --gcc-overlay-white: rgba(255,255,255,0.40); --gcc-overlay-white-md: rgba(255,255,255,0.65); /* Hover: tăng opacity nhẹ */ --gcc-overlay-hover: rgba(0,0,0,0.52); --gcc-overlay-white-hover: rgba(255,255,255,0.55); --gcc-overlay-brand: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 100%); } /* ============================================================ 9. TYPOGRAPHY — FONT FAMILY ============================================================ */ :root { --gcc-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; --gcc-font-serif: Georgia, Cambria, "Times New Roman", Times, serif; --gcc-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; --gcc-font-display: var(--gcc-font-sans); } /* ============================================================ 10. TYPOGRAPHY — FONT SIZE ============================================================ */ :root { --gcc-text-2xs: 10px; --gcc-text-xs: 11px; --gcc-text-sm: 12px; --gcc-text-sm2: 13px; --gcc-text-base: 14px; --gcc-text-md: 15px; --gcc-text-lg: 16px; --gcc-text-xl: 18px; --gcc-text-2xl: 20px; --gcc-text-3xl: 24px; --gcc-text-4xl: 28px; --gcc-text-5xl: 32px; --gcc-text-6xl: 36px; --gcc-text-7xl: 48px; --gcc-text-8xl: 60px; } /* ============================================================ 11. TYPOGRAPHY — FONT WEIGHT ============================================================ */ :root { --gcc-fw-thin: 100; --gcc-fw-light: 300; --gcc-fw-regular: 400; --gcc-fw-medium: 500; --gcc-fw-semibold: 600; --gcc-fw-bold: 700; --gcc-fw-extrabold: 800; --gcc-fw-black: 900; } /* ============================================================ 12. TYPOGRAPHY — LINE HEIGHT ============================================================ */ :root { --gcc-lh-none: 1; --gcc-lh-tight: 1.20; --gcc-lh-snug: 1.35; --gcc-lh-base: 1.50; --gcc-lh-relaxed: 1.65; --gcc-lh-loose: 1.80; --gcc-lh-looser: 2.00; } /* ============================================================ 13. TYPOGRAPHY — LETTER SPACING ============================================================ */ :root { --gcc-ls-tightest: -0.04em; --gcc-ls-tight: -0.02em; --gcc-ls-normal: 0em; --gcc-ls-wide: 0.03em; --gcc-ls-wider: 0.06em; --gcc-ls-widest: 0.12em; } /* ============================================================ 14. SPACING (base 4px) ============================================================ */ :root { --gcc-sp-px: 1px; --gcc-sp-0-5: 2px; --gcc-sp-1: 4px; --gcc-sp-1-5: 6px; --gcc-sp-2: 8px; --gcc-sp-2-5: 10px; --gcc-sp-3: 12px; --gcc-sp-3-5: 14px; --gcc-sp-4: 16px; --gcc-sp-5: 20px; --gcc-sp-6: 24px; --gcc-sp-7: 28px; --gcc-sp-8: 32px; --gcc-sp-9: 36px; --gcc-sp-10: 40px; --gcc-sp-11: 44px; --gcc-sp-12: 48px; --gcc-sp-14: 56px; --gcc-sp-16: 64px; --gcc-sp-20: 80px; --gcc-sp-24: 96px; --gcc-sp-32: 128px; } /* ============================================================ 15. BORDER RADIUS ============================================================ */ :root { --gcc-radius-none: 0; --gcc-radius-xs: 2px; --gcc-radius-sm: 4px; --gcc-radius: 8px; --gcc-radius-md: 10px; --gcc-radius-lg: 12px; --gcc-radius-xl: 16px; --gcc-radius-2xl: 20px; --gcc-radius-3xl: 24px; --gcc-radius-4xl: 32px; --gcc-radius-full: 9999px; } /* ============================================================ 16. BORDER WIDTH ============================================================ */ :root { --gcc-border-0: 0; --gcc-border: 1px; --gcc-border-2: 2px; --gcc-border-4: 4px; --gcc-border-8: 8px; } /* ============================================================ 17. SHADOW ============================================================ */ :root { --gcc-shadow-none: none; --gcc-shadow-xs: 0 1px 2px rgba(0,0,0,0.06); --gcc-shadow-sm: 0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06); --gcc-shadow: 0 4px 6px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.05); --gcc-shadow-md: 0 8px 16px rgba(0,0,0,0.10), 0 4px 6px rgba(0,0,0,0.05); --gcc-shadow-lg: 0 16px 32px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.06); --gcc-shadow-xl: 0 24px 48px rgba(0,0,0,0.14), 0 12px 24px rgba(0,0,0,0.07); --gcc-shadow-2xl: 0 40px 80px rgba(0,0,0,0.18), 0 20px 40px rgba(0,0,0,0.08); --gcc-shadow-inner: inset 0 2px 4px rgba(0,0,0,0.06); --gcc-shadow-inner-md: inset 0 4px 8px rgba(0,0,0,0.08); --gcc-shadow-inner-lg: inset 0 8px 16px rgba(0,0,0,0.10); /* ── Hover: shadow đậm hơn 1 mức ────── */ --gcc-shadow-xs-hover: 0 2px 6px rgba(0,0,0,0.12); --gcc-shadow-sm-hover: 0 4px 10px rgba(0,0,0,0.14); --gcc-shadow-hover: 0 8px 20px rgba(0,0,0,0.16); --gcc-shadow-md-hover: 0 12px 28px rgba(0,0,0,0.18); --gcc-shadow-lg-hover: 0 20px 40px rgba(0,0,0,0.20); /* ── Brand shadow ─────────────────────── */ --gcc-shadow-brand: 0 8px 24px rgba(0,0,0,0.24); --gcc-shadow-brand-lg: 0 16px 40px rgba(0,0,0,0.32); --gcc-shadow-brand-hover: 0 12px 32px rgba(0,0,0,0.38); /* ── Status shadow ───────────────────── */ --gcc-shadow-success: 0 4px 12px rgba(22,163,74,0.25); --gcc-shadow-error: 0 4px 12px rgba(220,38,38,0.25); --gcc-shadow-info: 0 4px 12px rgba(37,99,235,0.25); --gcc-shadow-warning: 0 4px 12px rgba(217,119,6,0.25); } /* ============================================================ 18. RING / FOCUS ============================================================ */ :root { --gcc-ring: 0 0 0 3px rgba(0,0,0,0.14); --gcc-ring-sm: 0 0 0 2px rgba(0,0,0,0.14); --gcc-ring-lg: 0 0 0 4px rgba(0,0,0,0.14); --gcc-ring-error: 0 0 0 3px rgba(220,38,38,0.18); --gcc-ring-success: 0 0 0 3px rgba(22,163,74,0.18); --gcc-ring-info: 0 0 0 3px rgba(37,99,235,0.18); --gcc-ring-warning: 0 0 0 3px rgba(217,119,6,0.18); --gcc-ring-outline: 0 0 0 2px #ffffff, 0 0 0 4px #1f1f1f; --gcc-ring-inverse: 0 0 0 2px #1f1f1f, 0 0 0 4px #ffffff; } /* ============================================================ 19. ANIMATION — EASING ============================================================ */ :root { --gcc-ease-linear: linear; --gcc-ease-in: cubic-bezier(0.4, 0, 1, 1); --gcc-ease-out: cubic-bezier(0, 0, 0.2, 1); --gcc-ease-inout: cubic-bezier(0.4, 0, 0.2, 1); --gcc-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275); --gcc-ease-back: cubic-bezier(0.34, 1.56, 0.64, 1); --gcc-ease-expo: cubic-bezier(0.16, 1, 0.3, 1); --gcc-ease-circ: cubic-bezier(0, 0.55, 0.45, 1); --gcc-ease-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55); } /* ============================================================ 20. ANIMATION — DURATION ============================================================ */ :root { --gcc-dur-instant: 50ms; --gcc-dur-faster: 80ms; --gcc-dur-fast: 120ms; --gcc-dur-base: 200ms; --gcc-dur-slow: 350ms; --gcc-dur-slower: 500ms; --gcc-dur-slowest: 700ms; --gcc-dur-long: 1s; --gcc-dur-longer: 2s; } /* ============================================================ 21. ANIMATION — SHORTHAND ============================================================ */ :root { --gcc-smooth: 200ms cubic-bezier(0.16, 1, 0.3, 1); --gcc-smooth-fast: 120ms cubic-bezier(0.16, 1, 0.3, 1); --gcc-smooth-slow: 350ms cubic-bezier(0.16, 1, 0.3, 1); --gcc-tr: all var(--gcc-smooth); --gcc-tr-colors: color var(--gcc-smooth), background-color var(--gcc-smooth), border-color var(--gcc-smooth), box-shadow var(--gcc-smooth); --gcc-tr-opacity: opacity var(--gcc-smooth); --gcc-tr-transform: transform var(--gcc-smooth); --gcc-skeleton-duration: 1.5s; } /* ============================================================ 22. Z-INDEX ============================================================ */ :root { --gcc-z-below: -1; --gcc-z-base: 0; --gcc-z-raised: 1; --gcc-z-dropdown: 100; --gcc-z-sticky: 200; --gcc-z-fixed: 250; --gcc-z-banner: 290; --gcc-z-modal-bg: 299; --gcc-z-modal: 300; --gcc-z-toast: 400; --gcc-z-tooltip: 500; --gcc-z-popover: 510; --gcc-z-spotlight: 600; --gcc-z-top: 9999; } /* ============================================================ 23. LAYOUT — CONTAINER & PANEL ============================================================ */ :root { --gcc-container-xs: 480px; --gcc-container-sm: 640px; --gcc-container-md: 768px; --gcc-container-lg: 1024px; --gcc-container: 1200px; --gcc-container-xl: 1440px; --gcc-container-2xl: 1680px; --gcc-sidebar-xs: 200px; --gcc-sidebar-sm: 240px; --gcc-sidebar: 280px; --gcc-sidebar-md: 320px; --gcc-sidebar-lg: 360px; --gcc-sidebar-xl: 400px; --gcc-modal-xs: 320px; --gcc-modal-sm: 400px; --gcc-modal-md: 560px; --gcc-modal-lg: 720px; --gcc-modal-xl: 900px; --gcc-modal-2xl: 1100px; --gcc-modal-full: 95vw; --gcc-drawer-sm: 280px; --gcc-drawer: 360px; --gcc-drawer-lg: 480px; } /* ============================================================ 24. LAYOUT — COMPONENT SIZING ============================================================ */ :root { --gcc-h-2xs: 22px; --gcc-h-xs: 26px; --gcc-h-sm: 30px; --gcc-h-base: 36px; --gcc-h-md: 40px; --gcc-h-lg: 44px; --gcc-h-xl: 48px; --gcc-h-2xl: 56px; --gcc-h-3xl: 64px; --gcc-avatar-xs: 24px; --gcc-avatar-sm: 32px; --gcc-avatar: 40px; --gcc-avatar-lg: 48px; --gcc-avatar-xl: 64px; --gcc-avatar-2xl: 80px; --gcc-avatar-3xl: 100px; --gcc-icon-xs: 12px; --gcc-icon-sm: 14px; --gcc-icon: 16px; --gcc-icon-md: 18px; --gcc-icon-lg: 20px; --gcc-icon-xl: 24px; --gcc-icon-2xl: 32px; --gcc-check-sm: 14px; --gcc-check: 16px; --gcc-check-lg: 18px; --gcc-toggle-w: 42px; --gcc-toggle-h: 22px; --gcc-toggle-thumb: 18px; --gcc-spinner-sm: 16px; --gcc-spinner: 20px; --gcc-spinner-lg: 28px; --gcc-spinner-xl: 40px; --gcc-progress-h-sm: 3px; --gcc-progress-h: 5px; --gcc-progress-h-lg: 8px; --gcc-badge-h-sm: 16px; --gcc-badge-h: 20px; --gcc-badge-h-lg: 24px; --gcc-tooltip-arrow: 6px; --gcc-divider-h: 1px; } /* ============================================================ 25. GRID ============================================================ */ :root { --gcc-cols: 12; --gcc-gap: 16px; --gcc-gap-sm: 8px; --gcc-gap-md: 20px; --gcc-gap-lg: 24px; --gcc-gap-xl: 32px; --gcc-col-gutter: 16px; --gcc-col-gutter-lg: 32px; } /* ============================================================ 26. OPACITY ============================================================ */ :root { --gcc-opacity-0: 0; --gcc-opacity-5: 0.05; --gcc-opacity-10: 0.10; --gcc-opacity-20: 0.20; --gcc-opacity-disabled: 0.40; --gcc-opacity-muted: 0.60; --gcc-opacity-hover: 0.85; --gcc-opacity-90: 0.90; --gcc-opacity-full: 1; --gcc-opacity-overlay: 0.50; } /* ============================================================ 27. CURSOR ============================================================ */ :root { --gcc-cursor-default: default; --gcc-cursor-pointer: pointer; --gcc-cursor-grab: grab; --gcc-cursor-grabbing: grabbing; --gcc-cursor-text: text; --gcc-cursor-move: move; --gcc-cursor-not: not-allowed; --gcc-cursor-wait: wait; --gcc-cursor-zoom-in: zoom-in; --gcc-cursor-zoom-out: zoom-out; --gcc-cursor-crosshair: crosshair; --gcc-cursor-resize-h: ew-resize; --gcc-cursor-resize-v: ns-resize; } /* ============================================================ 28. SCROLLBAR ============================================================ */ :root { --gcc-scrollbar-w: 6px; --gcc-scrollbar-track: var(--gcc-surface-1); --gcc-scrollbar-thumb: var(--gcc-ghi-400); --gcc-scrollbar-thumb-hover: var(--gcc-ghi-100); --gcc-scrollbar-radius: var(--gcc-radius-full); } /* ============================================================ 29. BACKDROP / BLUR / GLASS ============================================================ */ :root { --gcc-blur-sm: 4px; --gcc-blur: 8px; --gcc-blur-md: 12px; --gcc-blur-lg: 20px; --gcc-blur-xl: 40px; --gcc-glass-bg: rgba(255,255,255,0.75); --gcc-glass-bg-hover: rgba(255,255,255,0.90); --gcc-glass-border: rgba(255,255,255,0.50); --gcc-glass-border-hover: rgba(255,255,255,0.70); --gcc-glass-shadow: 0 8px 32px rgba(0,0,0,0.08); --gcc-glass-shadow-hover: 0 12px 40px rgba(0,0,0,0.14); --gcc-glass-dark-bg: rgba(20,20,20,0.80); --gcc-glass-dark-bg-hover: rgba(20,20,20,0.94); --gcc-glass-dark-border: rgba(255,255,255,0.08); --gcc-glass-dark-border-hover: rgba(255,255,255,0.16); --gcc-glass-dark-shadow: 0 8px 32px rgba(0,0,0,0.32); --gcc-glass-dark-shadow-hover: 0 12px 40px rgba(0,0,0,0.50); } /* ============================================================ 30. DARK MODE OVERRIDES Chỉ flip surface + ink + line + interactive + shadow. Spacing, radius, typography, layout — giữ nguyên. ============================================================ */ @media (prefers-color-scheme: dark) { :root { /* ── Ink ──────────────────────────────── */ --gcc-ink-strong: #f4f4f4; --gcc-ink: #e4e4e4; --gcc-ink-secondary: #b8b8b8; --gcc-ink-muted: #a0a0a0; --gcc-ink-faint: #6b6b6b; --gcc-ink-ghost: #525252; --gcc-ink-inverse: #141414; --gcc-ink-inverse-muted: #3d3d3d; --gcc-ink-strong-hover: #ffffff; --gcc-ink-hover: #f4f4f4; --gcc-ink-secondary-hover: #e4e4e4; --gcc-ink-muted-hover: #b8b8b8; --gcc-ink-inverse-hover: #1f1f1f; /* ── Surface ──────────────────────────── */ --gcc-surface: #141414; --gcc-surface-1: #1f1f1f; --gcc-surface-2: #2a2a2a; --gcc-surface-3: #3d3d3d; --gcc-surface-4: #525252; --gcc-surface-raised: #1f1f1f; --gcc-surface-sunken: #0a0a0a; --gcc-surface-dark: #000000; --gcc-surface-dark-1: #0a0a0a; --gcc-surface-dark-2: #141414; --gcc-surface-hover: #2a2a2a; --gcc-surface-1-hover: #3d3d3d; --gcc-surface-2-hover: #525252; --gcc-surface-3-hover: #6b6b6b; --gcc-surface-active: #3d3d3d; --gcc-surface-dark-active: #6b6b6b; /* ── Line ─────────────────────────────── */ --gcc-line-faint: #1f1f1f; --gcc-line-light: #2a2a2a; --gcc-line: #3d3d3d; --gcc-line-strong: #525252; --gcc-line-dark: #6b6b6b; --gcc-line-inverse: #b8b8b8; --gcc-line-hover: #6b6b6b; --gcc-line-strong-hover: #878787; --gcc-line-inverse-hover: #d0d0d0; /* ── Interactive ──────────────────────── */ --gcc-btn-black-bg: #e4e4e4; --gcc-btn-black-bg-hover: #ffffff; --gcc-btn-black-bg-active: #d0d0d0; --gcc-btn-black-bg-disabled: #3d3d3d; --gcc-btn-black-text: #141414; --gcc-btn-black-text-hover: #000000; --gcc-btn-black-shadow-hover: 0 4px 16px rgba(255,255,255,0.15); --gcc-btn-white-bg: #2a2a2a; --gcc-btn-white-bg-hover: #3d3d3d; --gcc-btn-white-bg-active: #1f1f1f; --gcc-btn-white-text: #e4e4e4; --gcc-btn-white-text-hover: #ffffff; --gcc-btn-ghi-bg: transparent; --gcc-btn-ghi-bg-hover: #2a2a2a; --gcc-btn-ghi-bg-active: #3d3d3d; --gcc-btn-ghi-text: #a0a0a0; --gcc-btn-ghi-text-hover: #e4e4e4; --gcc-btn-ghi-border: #3d3d3d; --gcc-btn-ghi-border-hover: #6b6b6b; --gcc-input-bg: #1f1f1f; --gcc-input-bg-hover: #2a2a2a; --gcc-input-bg-focus: #2a2a2a; --gcc-input-bg-disabled: #141414; --gcc-input-border: #3d3d3d; --gcc-input-border-hover: #6b6b6b; --gcc-input-border-focus: #b8b8b8; --gcc-input-text: #e4e4e4; --gcc-input-placeholder: #6b6b6b; --gcc-row-bg-hover: #2a2a2a; --gcc-row-bg-active: #3d3d3d; --gcc-row-bg-selected: #3d3d3d; --gcc-card-bg: #1f1f1f; --gcc-card-bg-hover: #2a2a2a; --gcc-card-bg-active: #3d3d3d; --gcc-card-border: #2a2a2a; --gcc-card-border-hover: #525252; --gcc-card-shadow: 0 2px 8px rgba(0,0,0,0.32); --gcc-card-shadow-hover: 0 6px 20px rgba(0,0,0,0.52); --gcc-nav-bg-hover: #2a2a2a; --gcc-nav-bg-active: #3d3d3d; --gcc-nav-bg-selected: #e4e4e4; --gcc-nav-text: #a0a0a0; --gcc-nav-text-hover: #e4e4e4; --gcc-nav-text-selected: #141414; --gcc-toggle-off-bg: #3d3d3d; --gcc-toggle-off-bg-hover: #525252; --gcc-toggle-on-bg: #e4e4e4; --gcc-toggle-on-bg-hover: #ffffff; --gcc-toggle-thumb: #141414; /* ── Gradient surface ─────────────────── */ --gcc-grad-surface: linear-gradient(180deg, #141414 0%, #1f1f1f 100%); --gcc-grad-surface-alt: linear-gradient(135deg, #1f1f1f 0%, #141414 100%); --gcc-grad-skeleton: linear-gradient(90deg, #2a2a2a 0%, #3d3d3d 50%, #2a2a2a 100%); /* ── Gradient primary flip ────────────── */ --gcc-grad-primary: linear-gradient(135deg, #d0d0d0 0%, #ffffff 100%); --gcc-grad-primary-hover: linear-gradient(135deg, #b8b8b8 0%, #f4f4f4 100%); --gcc-grad-primary-active: linear-gradient(135deg, #a0a0a0 0%, #e4e4e4 100%); --gcc-grad-hero: linear-gradient(135deg, #000000 0%, #1f1f1f 50%, #000000 100%); /* ── Shadow ───────────────────────────── */ --gcc-shadow-xs: 0 1px 2px rgba(0,0,0,0.30); --gcc-shadow-sm: 0 1px 3px rgba(0,0,0,0.36), 0 1px 2px rgba(0,0,0,0.26); --gcc-shadow: 0 4px 6px rgba(0,0,0,0.36), 0 2px 4px rgba(0,0,0,0.26); --gcc-shadow-md: 0 8px 16px rgba(0,0,0,0.42), 0 4px 6px rgba(0,0,0,0.26); --gcc-shadow-lg: 0 16px 32px rgba(0,0,0,0.46), 0 8px 16px rgba(0,0,0,0.28); --gcc-shadow-xl: 0 24px 48px rgba(0,0,0,0.52), 0 12px 24px rgba(0,0,0,0.30); --gcc-shadow-2xl: 0 40px 80px rgba(0,0,0,0.56), 0 20px 40px rgba(0,0,0,0.32); --gcc-shadow-hover: 0 8px 20px rgba(0,0,0,0.52); --gcc-shadow-md-hover: 0 12px 28px rgba(0,0,0,0.58); --gcc-shadow-brand: 0 8px 24px rgba(0,0,0,0.50); --gcc-shadow-brand-hover: 0 12px 32px rgba(0,0,0,0.60); --gcc-shadow-inner: inset 0 2px 4px rgba(0,0,0,0.24); --gcc-shadow-inner-md: inset 0 4px 8px rgba(0,0,0,0.30); --gcc-shadow-inner-lg: inset 0 8px 16px rgba(0,0,0,0.36); /* ── Ring ─────────────────────────────── */ --gcc-ring: 0 0 0 3px rgba(255,255,255,0.12); --gcc-ring-outline: 0 0 0 2px #141414, 0 0 0 4px #e4e4e4; --gcc-ring-inverse: 0 0 0 2px #e4e4e4, 0 0 0 4px #141414; /* ── Glass ────────────────────────────── */ --gcc-glass-bg: rgba(20,20,20,0.85); --gcc-glass-bg-hover: rgba(20,20,20,0.96); --gcc-glass-border: rgba(255,255,255,0.07); --gcc-glass-border-hover: rgba(255,255,255,0.15); --gcc-glass-shadow: 0 8px 32px rgba(0,0,0,0.45); --gcc-glass-shadow-hover: 0 12px 40px rgba(0,0,0,0.62); } } /* ============================================================ 31. ALIAS / COMPAT ============================================================ */ :root { /* Color */ --gcc-white: #ffffff; --gcc-black: #000000; --gcc-gray: var(--gcc-ink-muted); --gcc-gray-light: var(--gcc-surface-2); --gcc-gray-dark: var(--gcc-ink-secondary); --gcc-primary: var(--gcc-ink-strong); --gcc-text: var(--gcc-ink); --gcc-text-light: var(--gcc-ink-muted); --gcc-border-color: var(--gcc-line); --gcc-bg: var(--gcc-surface); --gcc-bg-alt: var(--gcc-surface-1); /* Interactive compat */ --gcc-btn-primary-bg: var(--gcc-btn-black-bg); --gcc-btn-primary-bg-hover: var(--gcc-btn-black-bg-hover); --gcc-btn-primary-text: var(--gcc-btn-black-text); --gcc-btn-primary-shadow-hover: var(--gcc-btn-black-shadow-hover); /* Spacing */ --gcc-xs: var(--gcc-sp-1); --gcc-sm: var(--gcc-sp-2); --gcc-md: var(--gcc-sp-4); --gcc-lg: var(--gcc-sp-6); --gcc-xl: var(--gcc-sp-8); --gcc-2xl: var(--gcc-sp-12); --gcc-3xl: var(--gcc-sp-16); /* Radius */ --gcc-rounded: var(--gcc-radius); --gcc-rounded-lg: var(--gcc-radius-lg); --gcc-rounded-full: var(--gcc-radius-full); /* Animation */ --gcc-transition: var(--gcc-smooth); --gcc-tr: all var(--gcc-smooth); /* Height */ --gcc-input-h: var(--gcc-h-base); --gcc-btn-h: var(--gcc-h-base); --gcc-btn-h-sm: var(--gcc-h-sm); --gcc-btn-h-lg: var(--gcc-h-lg); } /* * ============================================================ * QUICK REFERENCE — HOVER PATTERNS * ============================================================ * * ── BUTTON PRIMARY (đen) ────────────────────────────────── * .btn-primary { * background: var(--gcc-btn-black-bg); * color: var(--gcc-btn-black-text); * transition: var(--gcc-tr-colors); * } * .btn-primary:hover { background: var(--gcc-btn-black-bg-hover); * box-shadow: var(--gcc-btn-black-shadow-hover); } * .btn-primary:active { background: var(--gcc-btn-black-bg-active); } * .btn-primary:disabled { background: var(--gcc-btn-black-bg-disabled); } * * ── BUTTON GHOST (ghi) ──────────────────────────────────── * .btn-ghost { * background: var(--gcc-btn-ghi-bg); * border-color: var(--gcc-btn-ghi-border); * color: var(--gcc-btn-ghi-text); * } * .btn-ghost:hover { background: var(--gcc-btn-ghi-bg-hover); * border-color: var(--gcc-btn-ghi-border-hover); * color: var(--gcc-btn-ghi-text-hover); } * * ── GRADIENT CTA ────────────────────────────────────────── * .btn-grad { * background: var(--gcc-grad-primary); * transition: var(--gcc-tr-colors); * } * .btn-grad:hover { background: var(--gcc-grad-primary-hover); * box-shadow: var(--gcc-grad-hover-lift); } * .btn-grad:active { background: var(--gcc-grad-primary-active); } * * ── CARD ────────────────────────────────────────────────── * .card { * background: var(--gcc-card-bg); * border: var(--gcc-border) solid var(--gcc-card-border); * box-shadow: var(--gcc-card-shadow); * transition: var(--gcc-tr-colors); * } * .card:hover { background: var(--gcc-card-bg-hover); * border-color:var(--gcc-card-border-hover); * box-shadow: var(--gcc-card-shadow-hover); } * * ── INPUT ───────────────────────────────────────────────── * input { * background: var(--gcc-input-bg); * border-color: var(--gcc-input-border); * } * input:hover { border-color: var(--gcc-input-border-hover); } * input:focus { border-color: var(--gcc-input-border-focus); * box-shadow: var(--gcc-ring); } * * ── ROW ─────────────────────────────────────────────────── * tr:hover { background: var(--gcc-row-bg-hover); } * tr:active { background: var(--gcc-row-bg-active); } * tr.selected { background: var(--gcc-row-bg-selected); } * * ── NAV ITEM ────────────────────────────────────────────── * .nav-item { color: var(--gcc-nav-text); } * .nav-item:hover { background: var(--gcc-nav-bg-hover); * color: var(--gcc-nav-text-hover); } * .nav-item.selected { background: var(--gcc-nav-bg-selected); * color: var(--gcc-nav-text-selected); } * * ============================================================ * ENQUEUE (PHP) * ============================================================ * * add_action( 'wp_enqueue_scripts', function () { * wp_enqueue_style( * 'gcc-tokens', * GCC_URL . 'assets/css/gcc-tokens.css', * [], * GCC_VERSION * ); * }, 1 ); * * wp_enqueue_style( 'gcc-ai-image-gen', $url, ['gcc-tokens'], GCC_VERSION ); * wp_enqueue_style( 'gcc-wedding', $url, ['gcc-tokens'], GCC_VERSION ); * wp_enqueue_style( 'gcc-chat', $url, ['gcc-tokens'], GCC_VERSION ); * * ============================================================ */