74 lines
1.9 KiB
SCSS
74 lines
1.9 KiB
SCSS
:root {
|
|
/* ===== PRIMARY (GREEN) ===== */
|
|
--primary-50: #f0fdf4;
|
|
--primary-100: #dcfce7;
|
|
--primary-200: #bbf7d0;
|
|
--primary-300: #86efac;
|
|
--primary-400: #4ade80;
|
|
--primary-500: #22c55e;
|
|
--primary-600: #16a34a; /* MAIN */
|
|
--primary-700: #15803d;
|
|
--primary-800: #166534;
|
|
--primary-900: #14532d;
|
|
|
|
/* ===== SEMANTIC ===== */
|
|
--color-primary: var(--primary-600);
|
|
--color-primary-hover: var(--primary-700);
|
|
--color-primary-active: var(--primary-800);
|
|
|
|
/* ===== TEXT (NEUTRAL - QUAN TRỌNG) ===== */
|
|
--text-primary: #1f2937; /* gray-800 */
|
|
--text-secondary: #6b7280; /* gray-500 */
|
|
--text-light: #ffffff;
|
|
|
|
/* ===== BACKGROUND ===== */
|
|
--bg-primary: #ffffff;
|
|
--bg-secondary: #f9fafb; /* nhẹ hơn để không bị xanh quá */
|
|
--bg-accent: var(--primary-50);
|
|
|
|
/* ===== BORDER ===== */
|
|
--border-light: #e5e7eb;
|
|
--border-default: #d1d5db;
|
|
|
|
/* ===== STATE ===== */
|
|
--color-error: #ef4444;
|
|
--color-success: #22c55e;
|
|
|
|
/* ===== SHADOW ===== */
|
|
--shadow-card: 0 4px 20px rgba(0, 0, 0, 0.08);
|
|
|
|
/* ===== BUTTON ===== */
|
|
--btn-primary-bg: var(--primary-600);
|
|
--btn-primary-hover: var(--primary-700);
|
|
--btn-primary-active: var(--primary-800);
|
|
--btn-primary-text: #ffffff;
|
|
|
|
--btn-secondary-bg: var(--primary-100);
|
|
--btn-secondary-hover: var(--primary-200);
|
|
--btn-secondary-text: var(--primary-700);
|
|
|
|
--btn-disabled-bg: #e5e7eb;
|
|
--btn-disabled-text: #9ca3af;
|
|
|
|
/* ===== TEXT ===== */
|
|
--text-primary: #1f2937;
|
|
--text-secondary: #6b7280;
|
|
--text-muted: #9ca3af;
|
|
|
|
--text-on-primary: #ffffff; /* chữ trên nền xanh */
|
|
--text-link: var(--primary-600);
|
|
--text-link-hover: var(--primary-700);
|
|
|
|
/* ===== BORDER ===== */
|
|
--border-default: #d1d5db;
|
|
--border-focus: var(--primary-600);
|
|
|
|
/* ===== STATE ===== */
|
|
--state-success: var(--primary-500);
|
|
--state-error: #ef4444;
|
|
--state-warning: #f59e0b;
|
|
|
|
/* ===== LAYOUT ===== */
|
|
--layout-full-height: 100dvh;
|
|
}
|