:root {
  /* Layout */
  --container: 1220px;
  --gutter: 1rem;

  --font-body:
    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-body);

  --color-text: var(--gray-900);
  --color-bg: var(--white);

  /* Màu thương hiệu */
  --primary-50: #f0fdf4;
  --primary-100: #dcfce7;
  --primary-500: #22c55e;
  --primary-600: #16a34a;
  --primary-700: #15803d;
  --primary-shadow: rgba(34, 197, 94, 0.25);
  --primary-shadow-hover: rgba(34, 197, 94, 0.4);

  /* Thang xám */
  --white: #ffffff;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-500: #6b7280;
  --gray-700: #374151;
  --gray-900: #111827;

  /* Nền / đường kẻ */
  --bap-line: #e5e7eb;
  --night: #0f1f1a; /* nền section tối */

  /* Bo góc */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;

  /* Font */
  --font-body: "Ubuntu", system-ui, -apple-system, "Segoe UI", sans-serif;

  --night: #111827; /* nền footer như ảnh */
  --bap: var(--primary-500); /* nút back-to-top */
  --bap-dark: var(--primary-600);
  --radius-full: 9999px;
  --shadow-board: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
}

@media (min-width: 640px) {
  :root {
    --gutter: 1.5rem;
  }
}
@media (min-width: 1024px) {
  :root {
    --gutter: 2rem;
  }
}