/* =========================================================
   Rocket AI — Design tokens
   Hướng: sáng · tối giản · business-professional
   Đổi màu thương hiệu: chỉ sửa nhóm --c-brand-* bên dưới.
   ========================================================= */

:root {
  /* ---------- Typography ---------- */
  --font-sans: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --t-xs:   0.8125rem;   /* 13 */
  --t-sm:   0.875rem;    /* 14 */
  --t-base: 1rem;        /* 16 */
  --t-md:   1.0625rem;   /* 17 */
  --t-lg:   clamp(1.125rem, 0.5vw + 1rem, 1.25rem);
  --t-xl:   clamp(1.25rem, 1vw + 1rem, 1.5rem);
  --t-2xl:  clamp(1.5rem, 1.6vw + 1rem, 2rem);
  --t-3xl:  clamp(1.875rem, 2.4vw + 1rem, 2.75rem);
  --t-4xl:  clamp(2.125rem, 3.6vw + 1rem, 3.5rem);

  --lh-tight: 1.18;
  --lh-snug:  1.35;
  --lh-body:  1.65;

  /* ---------- Color ---------- */
  --c-bg:        #ffffff;
  --c-bg-soft:   #f6f8fb;
  --c-bg-tint:   #eef3fd;
  --c-surface:   #ffffff;

  --c-ink:       #0b1220;
  --c-ink-2:     #33415c;
  --c-muted:     #64748b;
  --c-muted-2:   #8b98ab;

  --c-line:        #e4e9f0;
  --c-line-strong: #cbd5e1;

  --c-brand:      #1d4ed8;
  --c-brand-2:    #3b82f6;
  --c-brand-deep: #1435a1;
  --c-brand-soft: #e9f0fe;
  --c-brand-tint: #f4f8ff;

  --c-accent:      #b45309;
  --c-accent-2:    #f59e0b;
  --c-accent-soft: #fff5e2;

  --c-ok:        #047857;
  --c-ok-soft:   #eafaf3;
  --c-danger:    #c2410c;
  --c-danger-soft:#fff1ea;

  /* ---------- Spacing ---------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;

  --section-y: clamp(56px, 7vw, 104px);

  /* ---------- Radius ---------- */
  --r-sm: 8px;  --r-md: 12px;  --r-lg: 16px;
  --r-xl: 22px; --r-pill: 999px;

  /* ---------- Elevation ---------- */
  --sh-xs: 0 1px 2px rgba(11, 18, 32, .05);
  --sh-sm: 0 1px 3px rgba(11, 18, 32, .06), 0 1px 2px rgba(11, 18, 32, .04);
  --sh-md: 0 4px 14px rgba(11, 18, 32, .07), 0 1px 3px rgba(11, 18, 32, .05);
  --sh-lg: 0 18px 42px rgba(11, 18, 32, .10), 0 4px 12px rgba(11, 18, 32, .05);
  --sh-brand: 0 8px 22px rgba(29, 78, 216, .22);

  /* ---------- Layout ---------- */
  --container: 1120px;
  --narrow:    780px;
  --header-h:  0px;

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(.16, .84, .44, 1);
  --dur:  .22s;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}