/**
 * Color Variables
 * Tất cả biến màu sắc của theme
 */

:root {
  /* Primary Colors - Brand Red */
  --primary-color: #27aa50;
  --tp-primary: #27aa50;
  --primary-light: #58cf7e;
  --primary-s-light: #7ee9a0;
  --primary-dark: #118536;

  /* Secondary Colors - Complementary */
  --secondary-color: #2a7eef;
  --tp-secondary: #2a7eef;
  --secondary-light: #5496f2;
  --secondary-dark: #1e5bb8;

  /* Neutral Colors */
  --white: #ffffff;
  --tp-white: #ffffff;
  --black: #000000;
  --tp-black: #000000;
  --gray-50: #f9fafb;
  --tp-gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --tp-gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --tp-gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --tp-gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --tp-gray-400: #9ca3af;
  --gray-500: #6b7280;
  --tp-gray-500: #6b7280;
  --gray-600: #4b5563;
  --tp-gray-600: #4b5563;
  --gray-700: #374151;
  --tp-gray-700: #374151;
  --gray-800: #1f2937;
  --tp-gray-800: #1f2937;
  --gray-900: #111827;
  --tp-gray-900: #111827;

  /* Border Radius */
  --tp-radius: 8px;
  --tp-radius-lg: 12px;

  /* Box Shadows */
  --tp-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --tp-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --tp-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);

  /* Status Colors */
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;

  /* Background Colors */
  --bg-body: #ffffff;
  --bg-section: #f8f9fa;
  --bg-card: #ffffff;

  /* Text Colors */
  --text-primary: #212529;
  --text-secondary: #6c757d;
  --text-muted: #adb5bd;

  /* Gradient Colors */
  --gradient-primary-green: linear-gradient(90deg, var(--tp-primary), #12874b);
  --gradient-primary-secondary: linear-gradient(
    90deg,
    var(--tp-primary),
    var(--tp-secondary)
  );
  --gradient-success: linear-gradient(90deg, var(--success), #059669);
  --gradient-warning: linear-gradient(90deg, var(--warning), #d97706);
  --gradient-danger: linear-gradient(90deg, var(--danger), #dc2626);

  /* Additional Gradients */
  --gradient-primary-vertical: linear-gradient(
    180deg,
    var(--tp-primary),
    #12874b
  );
  --gradient-primary-diagonal: linear-gradient(
    135deg,
    var(--tp-primary),
    #12874b
  );
  --gradient-rainbow: linear-gradient(
    90deg,
    var(--tp-primary),
    var(--tp-secondary),
    var(--success)
  );
}