/* DEFINITION OF DESIGN TOKENS & SYSTEM VARIABLES */
:root {
  /* Brand Colors */
  --color-primary: #003478;        /* Màu xanh Ford */
  --color-primary-dark: #00095b;   /* Màu xanh đậm Ford cho trạng thái hover */
  --color-secondary: #1A1A2E;      /* Màu xanh đen tối của thương hiệu */
  --color-dark-bg: #121224;        /* Nền tối cho các khu vực Dark Scheme */
  --color-dark-card: #1E1E30;      /* Nền card tối */
  --color-dark-border: #2A2A40;    /* Viền của card tối */
  --color-light-bg: #FFFFFF;       /* Nền sáng */
  --color-accent-bg: #F5F5F5;      /* Nền xám nhạt xen kẽ các section */
  --color-white: #FFFFFF;
  --color-success: #28A745;        /* Màu thông báo thành công / badge hoạt động */
  
  /* Text Colors */
  --color-text-main: #333333;      /* Text chính trên nền sáng */
  --color-text-muted: #595959;     /* Text phụ đã tăng tương phản lên WCAG AA (đầu vào là #777777) */
  --color-text-light: #FFFFFF;     /* Text trên nền tối */
  --color-placeholder: #767676;    /* Màu placeholder đạt chuẩn AA (đầu vào là #999999) */
  
  /* Typography */
  --font-heading: 'Montserrat', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  
  /* Spacing */
  --section-padding-desktop: 80px 0;
  --section-padding-mobile: 48px 0;
  --container-max-width: 1140px;
  --grid-gap-desktop: 24px;
  --grid-gap-mobile: 16px;
  
  /* UI Borders & Shadows */
  --border-radius-card: 12px;
  --border-radius-btn: 8px;
  --border-radius-input: 6px;
  
  --shadow-default: 0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.12);
  --shadow-dark: 0 4px 20px rgba(0, 0, 0, 0.3);
  
  /* Transition */
  --transition-fast: all 0.2s ease-in-out;
  --transition-normal: all 0.3s ease;
}