: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;
}