/* NẮNG. Solar — Design tokens (CSS custom properties)
   Màu · chữ · khoảng cách · bo góc · bóng · chuyển động. Đổi thương hiệu tại đây. */
:root {
  /* Màu */
  --ng-night: #0B1F3A;      /* xanh đêm — nền tối, chữ chính */
  --ng-night-2: #122B4E;    /* panel trên nền đêm */
  --ng-night-3: #1B3A66;    /* viền/hover trên nền đêm */
  --ng-sun: #FFC51F;        /* vàng nắng — CTA, nhấn */
  --ng-sun-2: #FF9F1C;      /* cam — gradient vùng dưới đường */
  --ng-sun-ink: #4A3300;    /* chữ trên nền vàng (tương phản ≥ 7:1) */
  --ng-teal: #19C3A0;       /* xanh ngọc — tiền tiết kiệm, trạng thái tốt */
  --ng-teal-ink: #0A5E4C;   /* chữ teal trên nền sáng (≥ 4.5:1) */
  --ng-white: #FFFFFF;
  --ng-mist: #EEF2F7;       /* xám sương — nền xen kẽ */
  --ng-mist-2: #E2E8F0;
  --ng-line: #D9E1EC;       /* viền */
  --ng-text: #5B6B82;       /* xám chữ phụ */
  --ng-ink: #0B1F3A;        /* chữ chính */
  --ng-danger: #D1343A;
  --ng-sky: #7FD1FF;

  /* Gradient */
  --ng-grad-sun: linear-gradient(180deg, var(--ng-sun) 0%, var(--ng-sun-2) 100%);
  --ng-grad-night: linear-gradient(160deg, #0B1F3A 0%, #123061 60%, #0B1F3A 100%);

  /* Chữ */
  --ng-font-head: 'Sora', 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ng-font-body: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ng-fs-xs: .75rem;   /* 12 */
  --ng-fs-sm: .875rem;  /* 14 */
  --ng-fs-md: 1rem;     /* 16 */
  --ng-fs-lg: 1.125rem; /* 18 */
  --ng-fs-xl: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  --ng-fs-h3: clamp(1.15rem, 1rem + .7vw, 1.4rem);
  --ng-fs-h2: clamp(1.6rem, 1.2rem + 1.8vw, 2.5rem);
  --ng-fs-h1: clamp(2rem, 1.4rem + 2.8vw, 3.5rem);
  --ng-fs-num: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  --ng-lh: 1.6;
  --ng-lh-tight: 1.15;

  /* Khoảng cách (4pt) */
  --ng-sp-1: .25rem; --ng-sp-2: .5rem; --ng-sp-3: .75rem; --ng-sp-4: 1rem; --ng-sp-5: 1.5rem;
  --ng-sp-6: 2rem; --ng-sp-7: 3rem; --ng-sp-8: 4rem; --ng-sp-9: 6rem;
  --ng-sec: clamp(3rem, 2rem + 4vw, 6rem);   /* padding section */
  --ng-gutter: clamp(1rem, 4vw, 2rem);
  --ng-wrap: 1200px;
  --ng-narrow: 820px;

  /* Bo góc, bóng */
  --ng-r: 12px;
  --ng-r-sm: 8px;
  --ng-r-lg: 20px;
  --ng-r-pill: 999px;
  --ng-shadow: 0 10px 30px rgba(11, 31, 58, .08);
  --ng-shadow-lg: 0 24px 60px rgba(11, 31, 58, .16);
  --ng-shadow-night: 0 20px 50px rgba(0, 0, 0, .35);

  /* Chuyển động */
  --ng-ease: cubic-bezier(.22, 1, .36, 1);
  --ng-dur: .5s;
  --ng-dur-fast: .2s;

  /* Hoa văn ô tấm pin */
  --ng-cells: repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 40px), repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 40px);

  /* Vùng chạm, focus */
  --ng-tap: 44px;
  --ng-focus: 0 0 0 3px rgba(255, 197, 31, .55);
}
@media (prefers-reduced-motion: reduce) {
  :root { --ng-dur: .01ms; --ng-dur-fast: .01ms; }
}