/*
 * Huteco — Design System (Design Tokens)
 * Cập nhật các giá trị placeholder bên dưới khi có brand guide chính thức.
 */

:root {
  /* ── Colors ──────────────────────────────────────────── */
  --huteco-primary:       #27b3e9;
  --huteco-primary-dark:  #1a95c8;
  --huteco-primary-dim:   rgba(39,179,233,0.1);
  --huteco-primary-bdr:   rgba(39,179,233,0.25);
  --huteco-accent:        #27b3e9;
  --huteco-accent-hover:  #1a95c8;
  --huteco-accent-red:    #27b3e9;
  --huteco-accent-red-hover: #1a95c8;
  --huteco-white:         #FFFFFF;
  --huteco-black:         #0d1117;
  --huteco-text:          #1a2332;
  --huteco-text-muted:    #5a6a7e;
  --huteco-bg:            #FFFFFF;
  --huteco-bg-alt:        #f4fafd;
  --huteco-border:        #dde8ef;

  /* ── Typography ──────────────────────────────────────── */
  --huteco-font:           'Inter', sans-serif;
  --huteco-weight-semi:    600;
  --huteco-weight-bold:    700;
  --huteco-weight-extra:   800;
  --huteco-weight-black:   900;
  --huteco-leading-normal: 1.6;
  --huteco-leading-loose:  1.8;

  /* ── Spacing ─────────────────────────────────────────── */
  --huteco-space-2:   0.5rem;
  --huteco-space-4:   1rem;
  --huteco-space-6:   1.5rem;
  --huteco-space-8:   2rem;
  --huteco-space-10:  2.5rem;
  --huteco-space-12:  3rem;
  --huteco-space-16:  4rem;
  --huteco-space-20:  5rem;
  --huteco-space-24:  6rem;

  /* ── Border Radius ───────────────────────────────────── */
  --huteco-radius-sm:   6px;
  --huteco-radius-md:   12px;
  --huteco-radius-lg:   24px;
  --huteco-radius-full: 9999px;

  /* ── Shadows ─────────────────────────────────────────── */
  --huteco-shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.08);
  --huteco-shadow-md:  0 4px 20px rgba(0, 0, 0, 0.12);
  --huteco-shadow-lg:  0 8px 40px rgba(0, 0, 0, 0.16);

  /* ── Transitions ─────────────────────────────────────── */
  --huteco-transition:      0.25s ease;
  --huteco-transition-slow: 0.4s ease;

  /* ── Container ───────────────────────────────────────── */
  --huteco-container:       1200px;
  --huteco-container-wide:  1440px;
  --huteco-container-px:    var(--huteco-space-4);

  /* ── Header ──────────────────────────────────────────── */
  --huteco-header-h:        80px;
  --huteco-header-h-scroll: 64px;
}