/* Centme' Report — Cent Beauty Design System 1.0 (static/ds/). Không hardcode hex. */
@import url("ds/styles.css");

:root {
  color-scheme: light;
  /* Tên biến cũ của web -> token design system (giữ tên để không phải sửa toàn bộ CSS/JS) */
  --orange-100: var(--cent-orange-400);        /* cam nhạt */
  --orange-25: var(--cent-orange-100);         /* cam rất nhạt (hover, nền tag) */
  --orange-deep-100: var(--cent-orange-500);   /* cam chính */
  --blue-100: var(--cent-blue-500);
  --blue-25: var(--cent-orange-100);
  --yellow-100: var(--cent-yellow-400);
  --cream-100: var(--cent-cream-50);
  --ink: var(--cent-ink-900);
  --surface: var(--cent-white);
  --line: var(--cent-gray-300);
  --radius-pill: var(--cent-radius-full);
  --font-sans: var(--cent-font-body);
  --font-display: var(--cent-font-display);

  --page: var(--cent-color-surface-soft);      /* nền kem #FFF7F2 */
  --ink-2: var(--cent-ink-900);
  --muted: var(--cent-gray-500);
  --grid: var(--cent-gray-100);                /* lưới biểu đồ, kẻ bảng */
  --axis: var(--cent-gray-300);
  --ring: rgba(41, 41, 48, 0.08);
  --wash: var(--cent-orange-100);              /* hover */
  --accent: var(--cent-orange-500);            /* viền focus = cam chính */
  /* Chuỗi dữ liệu, thứ tự cố định: cam = Doanh số thuần, xanh = Thực thu; trụ: cam Độc Lập, xanh Tự Do, vàng Hạnh Phúc */
  --series-1: var(--cent-orange-500);
  --series-2: var(--cent-blue-500);
  --series-3: var(--cent-yellow-400);
  --series-4: var(--cent-cyan-400);
  --series-5: var(--cent-coral-300);
  --series-other: var(--cent-gray-300);
  --on-accent: var(--cent-color-on-brand);
  /* DS không có token success/error. Token gần nhất: tăng = blue-500, giảm = orange-500. Đề xuất bổ sung token trạng thái. */
  --up: var(--cent-blue-500); --down: var(--cent-orange-500);
}

html { background: var(--page); }
body { font-family: var(--font-sans); color: var(--ink); background: var(--page); }
/* Cụm từ nhấn trong tiêu đề: cùng font display, tô cam (design system không có font serif) */
.accent-serif { font-family: var(--font-display); font-style: normal; font-weight: inherit; color: var(--cent-color-text-accent); }

/* Nút CTA = Button primary của design system: pill, nền cam chính, chữ trắng, hover tối ~7% */
.btn-cta {
  font: inherit; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  color: var(--cent-btn-primary-text); background: var(--cent-btn-primary-bg);
  border: 0; border-radius: var(--cent-btn-primary-radius);
  padding: var(--cent-btn-primary-py) var(--cent-btn-primary-px); cursor: pointer;
  transition: filter var(--cent-motion-fast) var(--cent-ease);
}
.btn-cta:hover { filter: brightness(0.93); }
.btn-cta:focus-visible { outline: 2px solid var(--cent-ink-900); outline-offset: 2px; }