@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* Giao diện Sáng (Mặc định) */
:root {
  --color-bg-main: #F3F6F9;
  --color-bg-card: #FFFFFF;
  --color-text-primary: #1E293B;
  --color-text-secondary: #64748B;

  --color-accent-blue: #3182CE;
  --color-accent-yellow: #ECC94B;
  --color-accent-pink: #ED64A6;
  --color-accent-teal: #38B2AC;
  --color-accent-purple: #9F7AEA;

  --font-family-main: 'Inter', sans-serif;
  --font-size-base: 14px;
  --border-radius-card: 12px;
  --spacing-base: 16px;
}

/* Giao diện Tối (Áp dụng khi thẻ HTML có class 'dark') */
html.dark {
  --color-bg-main: #1D2330;
  --color-bg-card: #212B36;
  --color-text-primary: #FFFFFF;
  --color-text-secondary: #828D9A;
}

body {
  font-family: var(--font-family-main);
  font-size: var(--font-size-base);
  background-color: var(--color-bg-main);
  color: var(--color-text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Các custom class khác có thể viết tại đây */

/* Hỗ trợ padding cho thiết bị di động có tai thỏ (iPhone) */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .pb-safe {
    padding-bottom: env(safe-area-inset-bottom);
  }
}