/* ============================================================
   ALPHA BOOTES ENTERPRISE PLATFORM
   Design System: Tech Light (Data-Dense Dashboard)
   Version: 2.0.0 — light theme, white bg / near-black text /
   mouse-grey secondary; blue+cyan primary, green/bordeaux/royal
   semantic. WCAG AA. (Token names unchanged for compatibility.)
   ============================================================ */

:root {
  /* ── Backgrounds (light) ───────────────────────────── */
  --bg-primary:     #FFFFFF;            /* nền trắng */
  --bg-secondary:   #F4F6FA;            /* canvas/zone phụ (sidebar, header bảng) */
  --bg-card:        #FFFFFF;            /* thẻ trắng, tách bằng border + shadow */
  --bg-hover:       #EEF2F7;            /* hover xám rất nhạt */
  --bg-input:       #FFFFFF;            /* field trắng, viền xám */
  --bg-overlay:     rgba(15, 23, 42, 0.45);  /* scrim modal 40–60% */
  --bg-glass:       rgba(255, 255, 255, 0.85);
  --bg-surface:     #FAFBFC;
  --bg-elevated:    #FFFFFF;

  /* ── Primary Accent (Blue — tech) ──────────────────── */
  --accent-primary:   #2563EB;          /* xanh dương */
  --accent-hover:     #1D4ED8;
  --accent-active:    #1E40AF;
  --accent-muted:     rgba(37, 99, 235, 0.12);
  --accent-subtle:    rgba(37, 99, 235, 0.06);
  --accent-glow:      rgba(37, 99, 235, 0.25);
  --accent-gradient:  linear-gradient(135deg, #2563EB, #06B6D4);  /* blue → cyan */
  --accent-gradient-dark: linear-gradient(135deg, #1D4ED8, #2563EB);

  /* ── Text ──────────────────────────────────────────── */
  --text-primary:   #111827;            /* chữ đen (gần đen) — ~16:1 trên trắng */
  --text-secondary: #4B5563;            /* xám lông chuột đậm — ~7:1 (AA cả trên sidebar) */
  --text-muted:     #5F6878;            /* xám lông chuột nhạt — ~5.5:1 (AA cả trên nền tint) */
  --text-inverse:   #FFFFFF;
  --text-accent:    #2563EB;
  --text-on-accent: #FFFFFF;            /* chữ trắng trên nút xanh */

  /* ── Status Colors (light, AA) ─────────────────────── */
  --status-success:     #15803D;        /* xanh lá đậm */
  --status-success-bg:  rgba(34, 197, 94, 0.14);   /* nền xanh lá pastel */
  --status-warning:     #A16207;        /* vàng royal (đậm, AA ~4.9:1 trên trắng) */
  --status-warning-bg:  rgba(202, 138, 4, 0.16);
  --status-danger:      #9B1C31;        /* đỏ bordo */
  --status-danger-bg:   rgba(155, 28, 49, 0.10);
  --status-info:        #0E7490;        /* xanh dương cyan */
  --status-info-bg:     rgba(8, 145, 178, 0.12);
  --status-neutral:     #64748B;
  --status-neutral-bg:  rgba(100, 116, 139, 0.12);

  /* ── Borders (dark-on-light, visible) ──────────────── */
  --border-primary:   rgba(15, 23, 42, 0.08);
  --border-secondary: rgba(15, 23, 42, 0.12);
  --border-accent:    rgba(37, 99, 235, 0.35);
  --border-focus:     rgba(37, 99, 235, 0.60);
  --border-hover:     rgba(15, 23, 42, 0.18);

  /* ── Shadows (soft grey, not heavy black) ──────────── */
  --shadow-sm:    0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md:    0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg:    0 8px 28px rgba(15, 23, 42, 0.12);
  --shadow-xl:    0 16px 48px rgba(15, 23, 42, 0.16);
  --shadow-glow:  0 0 0 3px rgba(37, 99, 235, 0.18);
  --shadow-inner: inset 0 1px 2px rgba(15, 23, 42, 0.06);

  /* ── Typography ────────────────────────────────────── */
  --font-primary:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:     'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
  --font-display:  'Outfit', 'Inter', sans-serif;

  --fs-xs:    0.6875rem;   /* 11px */
  --fs-sm:    0.75rem;     /* 12px */
  --fs-base:  0.8125rem;   /* 13px */
  --fs-md:    0.875rem;    /* 14px */
  --fs-lg:    1rem;        /* 16px */
  --fs-xl:    1.125rem;    /* 18px */
  --fs-2xl:   1.5rem;      /* 24px */
  --fs-3xl:   1.875rem;    /* 30px */
  --fs-4xl:   2.5rem;      /* 40px */

  --fw-light:     300;
  --fw-normal:    400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  --lh-tight:   1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

  /* ── Spacing ───────────────────────────────────────── */
  --sp-xs:  4px;
  --sp-sm:  8px;
  --sp-md:  12px;
  --sp-base: 16px;
  --sp-lg:  20px;
  --sp-xl:  24px;
  --sp-2xl: 32px;
  --sp-3xl: 40px;
  --sp-4xl: 48px;

  /* ── Layout ────────────────────────────────────────── */
  --sidebar-width:      260px;
  --sidebar-collapsed:  64px;
  --topbar-height:      56px;
  --content-max-width:  1440px;
  --content-padding:    var(--sp-xl);

  /* ── Border Radius ─────────────────────────────────── */
  --radius-xs:    4px;
  --radius-sm:    6px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-2xl:   20px;
  --radius-full:  9999px;

  /* ── Transitions ───────────────────────────────────── */
  --transition-fast:    150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal:  250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:    350ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring:  500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-Index Scale ─────────────────────────────────── */
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-fixed:      300;
  --z-sidebar:    400;
  --z-modal:      500;
  --z-popover:    600;
  --z-toast:      700;
  --z-tooltip:    800;
  --z-overlay:    900;
}