/* ==========================================================================
   GELEX HUB — Design tokens (mỏng / hiện đại, giữ 100% đỏ GELEX #d8232a)
   Áp dụng cho toàn bộ hệ thống. Override các giá trị cũ để shell mỏng hơn.
   ========================================================================== */

:root {
  /* Brand đỏ GELEX — không đổi */
  --brand: #d8232a;
  --brand-dark: #b91c1c;
  --brand-light: #fef2f2;
  --brand-tint: rgba(216, 35, 42, 0.06);
  --brand-tint-strong: rgba(216, 35, 42, 0.12);

  /* Nền & surface — trắng sạch hơn, bớt aurora nhiễu */
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #fafafa;          /* surface phụ dị hơn surface-alt */
  --surface-alt: #f8fafc;
  --border: #ececec;             /* border mảnh hơn cũ (#e2e8f0) */
  --border-subtle: #f4f4f5;
  --border-strong: #d4d4d8;

  /* Shadows — nhẹ hơn, phân tầng bằng border + tone thay vì shadow nặng */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.03);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.03);
  --shadow-md: 0 2px 4px -1px rgba(15, 23, 42, 0.06), 0 1px 2px -1px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 6px 12px -2px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --shadow-xl: 0 12px 24px -4px rgba(15, 23, 42, 0.10), 0 4px 8px -4px rgba(15, 23, 42, 0.05);
  /* Card: viền 1px mảnh thay shadow nặng */
  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.03), 0 0 0 1px rgba(15, 23, 42, 0.05);
  --shadow-card-hover: 0 2px 8px rgba(15, 23, 42, 0.07), 0 0 0 1px rgba(15, 23, 42, 0.06);

  /* Text (3 tầng, phân bằng font-weight) */
  --text: #111819;
  --text-dim: #5b6470;
  --text-faint: #9aa3af;

  /* Semantic */
  --success: #059669;
  --success-light: rgba(5, 150, 105, 0.10);
  --warning: #d97706;
  --danger: #dc2626;
  --danger-light: rgba(220, 38, 38, 0.08);

  /* Layout — shell mỏng mới */
  --menubar-h: 40px;
  --sidebar-w: 72px;
  --content-pad-x: 32px;
  --content-pad-y: 24px;

  /* Radius — nhỏ hơn cũ */
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Icon size (launcher tile) — nhỏ hơn cũ */
  --icon-size: 64px;

  /* Motion */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --focus: var(--brand);

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  color-scheme: light;
}

/* ---------- Enterprise Pro layer (G-E1) ----------
   Override sang zinc-neutral + 3 tầng surface + layout enterprise.
   Đặt SAU block :root ở trên để cùng specificity nhưng thắng thứ tự nguồn. */
:root {
  /* Surface 3 tầng (canvas > sunken > raised) — thống nhất, bỏ biến trùng */
  --surface-sunken: #f7f7f8;
  --surface-raised: #ffffff;
  --surface: var(--surface-raised);
  --surface-2: var(--surface-sunken);
  --surface-alt: var(--surface-sunken);
  /* Border zinc-neutral (bớt xanh) */
  --border: #ebebef;
  --border-strong: #d4d4d8;
  --border-subtle: #f2f2f4;
  /* Text zinc (enterprise) */
  --text: #18181b;
  --text-2: #52525b;
  --text-3: #a1a1aa;
  --text-dim: var(--text-2);
  --text-faint: var(--text-3);
  /* Accent đỏ tiết kiệm */
  --brand-soft: #fef2f2;
  --brand-border: #fecaca;
  --brand-tint: rgba(216, 35, 42, 0.05);
  --brand-tint-strong: rgba(216, 35, 42, 0.10);
  /* Layout enterprise — rail 60px thoáng hơn, content tận dụng desktop */
  --sidebar-w: 60px;
  --topbar-h: 48px;
  --menubar-h: 48px;     /* sync với topbar-h — shell.css cũ vẫn dùng --menubar-h */
  --content-max: 1240px;
  --content-pad-x: 28px;
  --content-pad-y: 22px;
  --row-h: 44px;         /* density chuẩn cho mọi list row */
  --section-gap: 18px;
  /* Radius nhỏ hơn (enterprise) */
  --radius-xs: 5px;
  --radius-sm: 7px;
  --radius: 9px;
  --radius-lg: 12px;
  /* Type scale rõ tầng */
  --fs-page: 21px;
  --fs-section: 12px;
  --fs-body: 13.5px;
  --fs-meta: 11.5px;
  --fs-mono: 11px;
  /* Spacing scale (4/8/12/16/20/24) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  /* Sidebar collapse (mobile) */
  --sidebar-w-collapsed: 60px;
}

@media (max-width: 1024px) {
  :root { --content-max: 100%; --content-pad-x: 22px; }
}
@media (max-width: 560px) {
  :root { --icon-size: 56px; --content-pad-x: 16px; --content-pad-y: 16px; }
}
@media (max-width: 720px) {
  :root { --sidebar-w: var(--sidebar-w-collapsed); }
}