/* ============================================================
   VRAJ ENGINEERING — Design System (Enterprise v2)
   90% Neutral, 8% Brand, 2% Semantic — Linear/Stripe inspired
   ============================================================ */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

/* ---------- CSS Reset ---------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-size: 16px;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg-canvas);
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font: inherit; color: inherit; border: none; background: none; }
input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; }
table { border-collapse: collapse; width: 100%; }
h1, h2, h3, h4, h5, h6 { font-weight: 600; line-height: 1.3; color: var(--text-heading); }

/* ---------- Design Tokens ---------- */
:root {
  /* Primary — Electric Indigo */
  --primary-50:   #F5F7FF;
  --primary-100:  #E8ECFF;
  --primary-200:  #CDD7FF;
  --primary-300:  #AABEFF;
  --primary-400:  #7E98FF;
  --primary-500:  #5A74F7;
  --primary-600:  #4562E6;
  --primary-700:  #364FCC;
  --primary-800:  #2A3E9E;
  --primary-900:  #1C296B;

  /* Neutral Scale — refined slate */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #FAFBFC;
  --neutral-100: #F4F6F8;
  --neutral-200: #E9EDF2;
  --neutral-300: #D7DEE8;
  --neutral-400: #AAB4C3;
  --neutral-500: #6B7280;
  --neutral-600: #4B5563;
  --neutral-700: #374151;
  --neutral-800: #1F2937;
  --neutral-900: #111827;
  --neutral-950: #0B1220;

  /* Accent — Violet (AI features only) */
  --accent-50:   #F7F5FF;
  --accent-100:  #EEE9FF;
  --accent-200:  #DDD4FF;
  --accent-300:  #C6B4FF;
  --accent-400:  #A98EFF;
  --accent-500:  #8D6AF2;
  --accent-600:  #7855DE;
  --accent-700:  #6243BA;
  --accent-800:  #503798;
  --accent-900:  #39286C;

  /* Surface Colors */
  --bg-canvas:     #F8FAFC;
  --bg-surface:    #FFFFFF;
  --bg-elevated:   #FCFCFD;
  --bg-hover:      #F3F5F8;
  --bg-active:     #EDF2FF;
  --bg-sidebar:    #FFFFFF;
  --bg-header:     rgba(255, 255, 255, 0.88);

  /* Glassmorphism */
  --glass-bg:      rgba(255, 255, 255, 0.72);
  --glass-border:  rgba(255, 255, 255, 0.28);
  --glass-shadow:  0 8px 32px rgba(15, 23, 42, 0.06);
  --glass-blur:    16px;

  /* Border Colors */
  --border-default:  #E6EAF0;
  --border-divider:  #EEF2F7;
  --border-light:    #F1F5F9;

  /* Text Colors */
  --text-heading:    #111827;
  --text-primary:    #1F2937;
  --text-secondary:  #6B7280;
  --text-muted:      #94A3B8;
  --text-disabled:   #CBD5E1;
  --text-inverse:    #FFFFFF;

  /* Semantic Colors — muted, refined */
  --success-bg:     #ECFDF5;
  --success-border: #A7F3D0;
  --success-text:   #059669;

  --warning-bg:     #FFF8EB;
  --warning-border: #FDE68A;
  --warning-text:   #D97706;

  --error-bg:       #FEF2F2;
  --error-border:   #FECACA;
  --error-text:     #DC2626;

  --info-bg:        #EEF4FF;
  --info-border:    #C7D8FF;
  --info-text:      #4562E6;

  /* Shadows — ultra-soft */
  --shadow-xs:    0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-sm:    0 2px 6px rgba(16, 24, 40, 0.06);
  --shadow-md:    0 8px 24px rgba(16, 24, 40, 0.08);
  --shadow-lg:    0 20px 48px rgba(16, 24, 40, 0.10);
  --shadow-xl:    0 32px 64px rgba(16, 24, 40, 0.12);
  --shadow-glass: 0 8px 32px rgba(16, 24, 40, 0.04);

  /* Border Radius */
  --radius-sm:     6px;
  --radius-md:     10px;
  --radius-lg:     14px;
  --radius-xl:     20px;
  --radius-card:   16px;
  --radius-button: 10px;
  --radius-input:  10px;

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

  /* Typography */
  --fs-xs:   0.75rem;   /* 12px */
  --fs-sm:   0.8125rem; /* 13px */
  --fs-base: 0.875rem;  /* 14px */
  --fs-md:   0.9375rem; /* 15px */
  --fs-lg:   1rem;      /* 16px */
  --fs-xl:   1.25rem;   /* 20px */
  --fs-2xl:  1.5rem;    /* 24px */
  --fs-3xl:  1.875rem;  /* 30px */
  --fs-4xl:  2.25rem;   /* 36px */

  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:  'JetBrains Mono', 'SF Mono', Monaco, monospace;
  --font-nums:  'IBM Plex Sans', 'Inter', sans-serif;

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-base: 200ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 300ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout */
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 0px;
  --header-height: 60px;
}

/* Gradients */
:root {
  --gradient-primary: linear-gradient(135deg, #5A74F7 0%, #4562E6 100%);
  --gradient-ai:      linear-gradient(135deg, #7855DE 0%, #5A74F7 100%);
  --gradient-surface: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
  --gradient-glass:   linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.5) 100%);
  --gradient-sidebar: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  --gradient-success: linear-gradient(135deg, #059669 0%, #10B981 100%);
  --gradient-warning: linear-gradient(135deg, #D97706 0%, #F59E0B 100%);
  --gradient-danger:  linear-gradient(135deg, #DC2626 0%, #EF4444 100%);
}

/* ---------- Global Styles ---------- */
::selection { background: var(--primary-200); color: var(--primary-800); }

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--neutral-300); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--neutral-400); }

:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Typography Utilities ---------- */
.text-xs   { font-size: var(--fs-xs); }
.text-sm   { font-size: var(--fs-sm); }
.text-base { font-size: var(--fs-base); }
.text-md   { font-size: var(--fs-md); }
.text-lg   { font-size: var(--fs-lg); }
.text-xl   { font-size: var(--fs-xl); }
.text-2xl  { font-size: var(--fs-2xl); }
.text-3xl  { font-size: var(--fs-3xl); }
.text-4xl  { font-size: var(--fs-4xl); }

.font-medium  { font-weight: 500; }
.font-semibold{ font-weight: 600; }
.font-bold    { font-weight: 700; }

.text-mono  { font-family: var(--font-mono); }
.text-nums  { font-family: var(--font-nums); font-variant-numeric: tabular-nums; }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-heading { color: var(--text-heading); }
.muted { color: var(--text-muted); }

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* ---------- Skeleton Loading ---------- */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(90deg, var(--neutral-100) 25%, var(--neutral-200) 50%, var(--neutral-100) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

/* ---------- Divider ---------- */
.divider {
  height: 1px;
  background: var(--border-divider);
  margin: var(--space-4) 0;
}