/* ═══════════════════════════════════════════════════════════
   @layer order — ITCSS cascade layers (declared first, loads first)
   settings < base < layout < components < utilities
   ═══════════════════════════════════════════════════════════ */
@layer settings, base, layout, components, utilities;

@layer settings {

/* ===== settings layer — variables.css ===== */
/* ═══════════════════════════════════════════════════════════
   variables.css — Design Tokens (Light + Dark)
   TRADEPRESS CRM · ITCSS Layer: Settings
   Brand colors: TP Primary #0a20d6, Secondary #1da9f8, Accent #51dff5
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   TẦNG 1 — PRIMITIVE: bảng màu thô. Chỉ nơi này được chứa mã hex.
   Component KHÔNG được dùng trực tiếp; chỉ tầng semantic tham chiếu.
   ═══════════════════════════════════════════════════════════ */
:root {
  /* Neutral — nền sáng */
  --gray-0: #ffffff;
  --gray-50: #f5f7fa;
  --gray-75: #f5f6f8;
  --gray-100: #f0f2f5;
  --gray-150: #eef1f5;
  --gray-200: #e3e6eb;
  --gray-250: #e8eaed;
  --gray-300: #c4c9d0;
  --gray-500: #6b7280;
  --gray-900: #1a1d23;

  /* Neutral — nền tối */
  --slate-100: #e6edf3;
  --slate-400: #8b949e;
  --slate-600: #484f58;
  --slate-700: #30363d;
  --slate-750: #2d333b;
  --slate-775: #21262d;
  --slate-800: #22272e;
  --slate-850: #1c2128;
  --slate-900: #161b22;
  --slate-950: #0d1117;

  /* Brand — TP Primary (deep blue #0a20d6) */
  --tp-50: #f2f3fc;
  --tp-100: #e5e7fa;
  --tp-200: #ccd0f6;
  --tp-300: #99a1ed;
  --tp-400: #5160e0;
  --tp-500: #0a20d6;
  --tp-600: #091dc1;
  --tp-700: #0819ab;
  --tp-800: #071696;
  --tp-900: #061380;

  /* Brand — TP Dark mode (lighter versions) */
  --tp-dk-400: #7987fc;
  --tp-dk-500: #5366f5;
  --tp-dk-600: #2d4aed;
  --tp-dk-700: #1d3ad0;

  /* Brand — TP Secondary (sky blue #1da9f8) */
  --tp-sec-400: #4dbdf9;
  --tp-sec-500: #1da9f8;
  --tp-sec-600: #1793d6;

  /* Brand — TP Accent (cyan #51dff5) */
  --tp-acc-400: #74e8f8;
  --tp-acc-500: #51dff5;
  --tp-acc-600: #2fc9e8;

  /* Trạng thái — nền sáng */
  --success-600: #16a34a;
  --danger-600: #dc2626;
  --warning-600: #d97706;
  --info-600: #2563eb;
  --violet-500: #8b5cf6;
  --success-100: #dcfce7;
  --danger-100: #fee2e2;
  --warning-100: #fef3c7;
  --info-100: #dbeafe;

  /* Trạng thái — nền tối */
  --success-dk: #3fb950;
  --danger-dk: #f85149;
  --warning-dk: #d29922;
  --info-dk: #58a6ff;
  --violet-dk: #a78bfa;

  /* Dải màu biểu đồ */
  --success-800: #166534;
  --warning-800: #92400e;
  --danger-700: #b91c1c;
  --info-700: #1d4ed8;
  --violet-600: #7c3aed;
  --cyan-600: #0891b2;
  --pink-600: #db2777;
  --lime-600: #65a30d;
  --orange-600: #ea580c;
  --indigo-600: #4f46e5;
}

/* ═══════════════════════════════════════════════════════════
   TẦNG 2 — SEMANTIC: ý nghĩa sử dụng. Component chỉ dùng tầng này.
   Chế độ tối ghi đè đúng các token này (khối data-theme='dark').
   ═══════════════════════════════════════════════════════════ */
:root {
  color-scheme: light;

  /* ─── Color — Brand (TP Primary) ─── */
  --color-primary: var(--tp-500);
  --color-primary-hover: var(--tp-600);
  --color-primary-active: var(--tp-700);
  --color-primary-light: var(--tp-50);
  --color-primary-dark: var(--tp-800);

  /* ─── Color — Brand (TP Secondary + Accent) ─── */
  --color-secondary: var(--tp-sec-500);
  --color-secondary-hover: var(--tp-sec-600);
  --color-accent: var(--tp-acc-500);
  --color-accent-light: var(--tp-acc-400);

  /* ─── Color — Surface ─── */
  --color-bg: var(--gray-100);
  --color-surface: var(--gray-0);
  --color-surface-alt: var(--gray-50);
  --color-surface-hover: var(--gray-150);
  --color-border: var(--gray-200);
  --color-border-strong: var(--gray-300);

  /* ─── Color — Text ─── */
  --color-text: var(--gray-900);
  --color-text-muted: var(--gray-500);
  --color-text-inverse: var(--gray-0);

  /* ─── Color — Semantic ─── */
  --color-success: var(--success-600);
  --color-danger: var(--danger-600);
  --color-warning: var(--warning-600);
  --color-info: var(--info-600);

  /* ─── Color — Chữ/nút đặc đạt WCAG AA (≥4.5:1) trên nền sáng; ở dark = màu gốc ─── */
  --color-primary-solid: var(--tp-700);
  --color-primary-text: var(--tp-700);
  --color-success-text: var(--success-800);
  --color-warning-text: var(--warning-800);
  --color-danger-text: var(--danger-700);
  --color-info-text: var(--info-700);

  /* ─── Color — Chart series (thứ tự cố định) ─── */
  --chart-1: var(--color-primary);
  --chart-2: var(--color-secondary);
  --chart-3: var(--color-accent);
  --chart-4: var(--color-danger);
  --chart-5: var(--violet-600);
  --chart-6: var(--cyan-600);
  --chart-7: var(--pink-600);
  --chart-8: var(--lime-600);
  --chart-9: var(--orange-600);
  --chart-10: var(--indigo-600);

  /* ─── Color — Semantic backgrounds ─── */
  --color-success-bg: var(--success-100);
  --color-danger-bg: var(--danger-100);
  --color-warning-bg: var(--warning-100);
  --color-info-bg: var(--info-100);

  /* ─── Activity markers ─── */
  --activity-marker-size: 10px;
  --activity-marker-size-large: 20px;
  --activity-marker-communication: var(--color-info);
  --activity-marker-finance: var(--color-success);
  --activity-marker-kyc: var(--color-primary);
  --activity-marker-compliance: var(--color-danger);
  --activity-marker-workflow: var(--color-warning);
  --activity-marker-system: var(--color-text-muted);
  --activity-marker-urgent: var(--color-danger);

  /* ─── Color — Pipeline stages ─── */
  --pipeline-lead: var(--color-info);
  --pipeline-prospect: var(--violet-500);
  --pipeline-kyc: var(--color-warning);
  --pipeline-investor: var(--color-success);

  /* ─── Spacing — 8px grid ─── */
  --space-px: 2px;
  --space-0: 4px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;

  /* ─── Typography ─── */
  --font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-family-mono: 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-lg: 18px;
  --font-size-xl: 24px;
  --font-size-2xl: 32px;
  --font-size-3xl: 48px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height: 1.5;
  --line-height-tight: 1.25;
  --line-height-relaxed: 1.7;

  /* ─── Radius ─── */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 999px;

  /* ─── Shadow — Modern elevation ─── */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.10), 0 4px 8px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.14), 0 8px 16px rgba(0, 0, 0, 0.06);

  /* ─── Layout ─── */
  --sidebar-width: 240px;
  --sidebar-collapsed: 56px;
  --topbar-height: 56px;
  --detail-header-compact-height: 60px;
  --content-max-width: none;

  /* ─── Z-index scale ─── */
  --z-topbar: 100;
  --z-sidebar: 90;
  --z-dropdown: 200;
  --z-modal: 300;
  --z-toast: 400;

  /* ─── Transition ─── */
  --transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 100ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ─── Skeleton shimmer ─── */
  --skeleton-bg: var(--gray-250);
  --skeleton-shine: var(--gray-75);

  /* ─── Overlay ─── */
  --overlay-bg: rgba(0, 0, 0, 0.45);

  /* ─── Control sizing ─── */
  --control-height: 36px;
  --control-height-sm: 28px;
  --meter-height: 8px;
  --field-min-width: 160px;
  --touch-target: 44px;

  /* ─── Size scale (icon, avatar, chấm, ô vuông) ─── */
  --size-xs: 12px;
  --size-sm: 16px;
  --size-md: 20px;
  --size-lg: 32px;
  --size-xl: 40px;
  --size-2xl: 48px;
  --size-3xl: 80px;

  /* ─── Width scale (cột, panel, hộp thoại, khung biểu đồ) ─── */
  --width-xs: 120px;
  --width-sm: 160px;
  --width-md: 200px;
  --width-lg: 240px;
  --width-xl: 320px;
  --width-2xl: 400px;
  --width-3xl: 480px;
  --width-4xl: 600px;
  --width-5xl: 800px;

  /* ─── Border / focus / blur ─── */
  --border-accent: 3px;
  --focus-ring-width: 3px;
  --blur-sm: 4px;
  --blur-md: 12px;

  /* ─── Risk status ─── */
  --risk-normal: var(--color-success);
  --risk-warning: var(--color-warning);
  --risk-critical: var(--color-danger);
  --risk-halted: var(--color-danger);
  --meter-mark: var(--color-text-muted);
}

/* ═══════════════════════════════════════════════════════════
   Dark mode — TP brand on dark surfaces
   Kích hoạt: <html data-theme="dark">
   ═══════════════════════════════════════════════════════════ */
:root[data-theme='dark'] {
  color-scheme: dark;

  /* Brand — TP Primary (lighter for dark mode) */
  --color-primary: var(--tp-dk-500);
  --color-primary-hover: var(--tp-dk-400);
  --color-primary-active: var(--tp-dk-600);
  --color-primary-light: color-mix(in srgb, var(--tp-dk-500) 12%, transparent);
  --color-primary-dark: var(--tp-dk-700);

  /* Brand — TP Secondary + Accent */
  --color-secondary: var(--tp-sec-500);
  --color-secondary-hover: var(--tp-sec-400);
  --color-accent: var(--tp-acc-500);
  --color-accent-light: var(--tp-acc-400);

  /* Surface */
  --color-bg: var(--slate-950);
  --color-surface: var(--slate-900);
  --color-surface-alt: var(--slate-850);
  --color-surface-hover: var(--slate-800);
  --color-border: var(--slate-700);
  --color-border-strong: var(--slate-600);

  /* Text */
  --color-text: var(--slate-100);
  --color-text-muted: var(--slate-400);
  --color-text-inverse: var(--slate-950);

  /* Semantic */
  --color-success: var(--success-dk);
  --color-danger: var(--danger-dk);
  --color-warning: var(--warning-dk);
  --color-info: var(--info-dk);

  /* Semantic backgrounds */
  --color-success-bg: color-mix(in srgb, var(--success-dk) 12%, transparent);
  --color-danger-bg: color-mix(in srgb, var(--danger-dk) 12%, transparent);
  --color-warning-bg: color-mix(in srgb, var(--warning-dk) 12%, transparent);
  --color-info-bg: color-mix(in srgb, var(--info-dk) 12%, transparent);

  /* Chữ/nút đặc: dark dùng màu gốc (đã đạt AA trên nền tối) */
  --color-primary-solid: var(--tp-dk-500);
  --color-primary-text: var(--color-primary);
  --color-success-text: var(--color-success);
  --color-warning-text: var(--color-warning);
  --color-danger-text: var(--color-danger);
  --color-info-text: var(--color-info);

  /* Pipeline */
  --pipeline-prospect: var(--violet-dk);

  /* Shadow */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.7);

  /* Skeleton */
  --skeleton-bg: var(--slate-775);
  --skeleton-shine: var(--slate-750);

  /* Overlay */
  --overlay-bg: rgba(0, 0, 0, 0.6);
}

}