/**
 * In-doc Design Tokens
 * Ready-to-use CSS Variables for .NET/Blazor/Bootstrap Implementation
 * 
 * Usage: Import this file in your main layout/app.css
 */

/* ========================================
   LIGHT MODE (Default)
   ======================================== */

:root {
  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', Menlo, monospace;
  
  /* Spacing & Sizing */
  --radius-sm: 0.1875rem;     /* 3px */
  --radius-md: 0.375rem;      /* 6px */
  --radius-lg: 0.5625rem;     /* 9px */
  --radius-full: 9999px;      /* pill shape */
  
  /* Base Colors (HSL format) */
  --background: 0 0% 100%;                 /* #FFFFFF */
  --foreground: 222 47% 11%;               /* #0F172A */
  
  /* Surface Colors */
  --card: 0 0% 98%;                        /* #FAFAFA */
  --card-foreground: 222 47% 11%;          /* #0F172A */
  --card-border: 220 13% 93%;              /* #EEEFF1 */
  
  --sidebar: 220 14% 96%;                  /* #F5F6F7 */
  --sidebar-foreground: 222 47% 11%;       /* #0F172A */
  --sidebar-border: 220 13% 89%;           /* #E0E2E5 */
  
  --popover: 0 0% 95%;                     /* #F2F2F2 */
  --popover-foreground: 222 47% 11%;       /* #0F172A */
  --popover-border: 220 13% 88%;           /* #DDDFE2 */
  
  /* Borders & Inputs */
  --border: 220 13% 91%;                   /* #E5E7EB */
  --input: 220 13% 85%;                    /* #D1D5DB */
  
  /* Brand Colors */
  --primary: 221 83% 53%;                  /* #3B82F6 - Blue */
  --primary-foreground: 210 40% 98%;       /* #F8FAFC */
  
  --secondary: 220 14% 92%;                /* #EAEBEC - Light Gray */
  --secondary-foreground: 222 47% 11%;     /* #0F172A */
  
  --accent: 217 19% 90%;                   /* #E3E8EF - Neutral Accent */
  --accent-foreground: 222 47% 11%;        /* #0F172A */
  
  /* Semantic Colors */
  --muted: 220 13% 93%;                    /* #EEEFF1 */
  --muted-foreground: 220 9% 46%;          /* #6B7280 - Subtle text */
  
  --destructive: 0 84% 60%;                /* #EF4444 - Red */
  --destructive-foreground: 0 0% 98%;      /* #FAFAFA */
  
  --success: 142 76% 36%;                  /* #10B981 - Green */
  --success-foreground: 0 0% 100%;         /* #FFFFFF */
  
  --warning: 31 92% 55%;                   /* #F59E0B - Orange */
  --warning-foreground: 0 0% 100%;         /* #FFFFFF */
  
  --info: 221 83% 53%;                     /* Same as primary */
  --info-foreground: 210 40% 98%;          /* #F8FAFC */
  
  --ring: 221 83% 53%;                     /* Focus ring - Blue */
  
  /* Shadows (Light Mode) */
  --shadow-xs: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
  --shadow-sm: 0px 2px 4px -1px rgba(0, 0, 0, 0.06), 0px 1px 2px -1px rgba(0, 0, 0, 0.06);
  --shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-md: 0px 6px 12px -2px rgba(0, 0, 0, 0.12), 0px 3px 7px -3px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0px 10px 20px -5px rgba(0, 0, 0, 0.16), 0px 6px 12px -5px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0px 20px 25px -5px rgba(0, 0, 0, 0.18), 0px 10px 15px -5px rgba(0, 0, 0, 0.08);
  --shadow-2xl: 0px 25px 50px -12px rgba(0, 0, 0, 0.25);
  
  /* Interactive States */
  --elevate-hover: rgba(0, 0, 0, 0.03);    /* Subtle background on hover */
  --elevate-active: rgba(0, 0, 0, 0.08);   /* Background on press */
}

/* ========================================
   DARK MODE
   ======================================== */

.dark,
body.dark,
[data-theme="dark"] {
  /* Base Colors (HSL format) */
  --background: 222 47% 11%;               /* #0F172A - Dark blue-gray */
  --foreground: 210 40% 98%;               /* #F8FAFC - Light text */
  
  /* Surface Colors */
  --card: 220 39% 13%;                     /* #1A1F2E */
  --card-foreground: 210 40% 98%;          /* #F8FAFC */
  --card-border: 217 33% 18%;              /* #232B3B */
  
  --sidebar: 220 39% 15%;                  /* #1E2433 */
  --sidebar-foreground: 210 40% 98%;       /* #F8FAFC */
  --sidebar-border: 217 33% 20%;           /* #283346 */
  
  --popover: 220 39% 17%;                  /* #222938 */
  --popover-foreground: 210 40% 98%;       /* #F8FAFC */
  --popover-border: 217 33% 22%;           /* #2D3748 */
  
  /* Borders & Inputs */
  --border: 217 33% 17%;                   /* #202938 */
  --input: 217 33% 28%;                    /* #3A4556 */
  
  /* Brand Colors (Lighter in dark mode) */
  --primary: 217 91% 60%;                  /* #60A5FA - Lighter blue */
  --primary-foreground: 222 47% 11%;       /* Dark text on primary */
  
  --secondary: 220 39% 20%;                /* #2A3342 - Dark gray */
  --secondary-foreground: 210 40% 98%;     /* #F8FAFC */
  
  --accent: 217 33% 21%;                   /* #2D3748 */
  --accent-foreground: 210 40% 98%;        /* #F8FAFC */
  
  /* Semantic Colors */
  --muted: 220 39% 19%;                    /* #272E3F */
  --muted-foreground: 217 19% 65%;         /* #94A3B8 - Subtle light text */
  
  --destructive: 0 72% 51%;                /* #DC2626 - Slightly darker red */
  --destructive-foreground: 210 40% 98%;   /* #F8FAFC */
  
  --success: 142 70% 45%;                  /* #22C55E - Brighter green */
  --success-foreground: 0 0% 100%;         /* #FFFFFF */
  
  --warning: 31 97% 72%;                   /* #FBBF24 - Brighter orange */
  --warning-foreground: 222 47% 11%;       /* Dark text */
  
  --info: 217 91% 60%;                     /* Same as primary */
  --info-foreground: 222 47% 11%;          /* #0F172A */
  
  --ring: 217 91% 60%;                     /* Focus ring */
  
  /* Shadows (Dark Mode - Deeper) */
  --shadow-xs: 0px 1px 3px 0px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0px 2px 4px -1px rgba(0, 0, 0, 0.3), 0px 1px 2px -1px rgba(0, 0, 0, 0.3);
  --shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.4), 0px 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-md: 0px 6px 12px -2px rgba(0, 0, 0, 0.5), 0px 3px 7px -3px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0px 10px 20px -5px rgba(0, 0, 0, 0.6), 0px 6px 12px -5px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0px 20px 25px -5px rgba(0, 0, 0, 0.7), 0px 10px 15px -5px rgba(0, 0, 0, 0.4);
  --shadow-2xl: 0px 25px 50px -12px rgba(0, 0, 0, 0.8);
  
  /* Interactive States */
  --elevate-hover: rgba(255, 255, 255, 0.04);
  --elevate-active: rgba(255, 255, 255, 0.09);
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Typography */
.font-sans {
  font-family: var(--font-sans);
}

.font-mono {
  font-family: var(--font-mono);
}

/* Text Colors */
.text-foreground {
  color: hsl(var(--foreground));
}

.text-muted {
  color: hsl(var(--muted-foreground));
}

.text-primary {
  color: hsl(var(--primary));
}

.text-destructive {
  color: hsl(var(--destructive));
}

.text-success {
  color: hsl(var(--success));
}

.text-warning {
  color: hsl(var(--warning));
}

/* Background Colors */
.bg-background {
  background-color: hsl(var(--background));
}

.bg-card {
  background-color: hsl(var(--card));
}

.bg-primary {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.bg-secondary {
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
}

.bg-destructive {
  background-color: hsl(var(--destructive));
  color: hsl(var(--destructive-foreground));
}

.bg-success {
  background-color: hsl(var(--success));
  color: hsl(var(--success-foreground));
}

.bg-warning {
  background-color: hsl(var(--warning));
  color: hsl(var(--warning-foreground));
}

.bg-muted {
  background-color: hsl(var(--muted));
}

/* Borders */
.border-default {
  border: 1px solid hsl(var(--border));
}

.border-card {
  border: 1px solid hsl(var(--card-border));
}

.border-primary {
  border-color: hsl(var(--primary));
}

/* Border Radius */
.rounded-sm {
  border-radius: var(--radius-sm);
}

.rounded-md {
  border-radius: var(--radius-md);
}

.rounded-lg {
  border-radius: var(--radius-lg);
}

.rounded-full {
  border-radius: var(--radius-full);
}

/* Shadows */
.shadow-xs {
  box-shadow: var(--shadow-xs);
}

.shadow-sm {
  box-shadow: var(--shadow-sm);
}

.shadow {
  box-shadow: var(--shadow);
}

.shadow-md {
  box-shadow: var(--shadow-md);
}

.shadow-lg {
  box-shadow: var(--shadow-lg);
}

.shadow-xl {
  box-shadow: var(--shadow-xl);
}

.shadow-2xl {
  box-shadow: var(--shadow-2xl);
}

/* Interactive States */
.hover-elevate {
  transition: background-color 0.2s ease;
}

.hover-elevate:hover {
  background-color: var(--elevate-hover);
}

.active-elevate:active {
  background-color: var(--elevate-active);
}

/* ========================================
   RESPONSIVE HELPERS
   ======================================== */

@media (max-width: 767px) {
  :root {
    --sidebar-width: 0;
  }
}

@media (min-width: 768px) {
  :root {
    --sidebar-width: 16rem; /* 256px */
  }
}

/* ========================================
   NOTES
   ======================================== */

/*
 * Usage in HTML/Blazor:
 * 
 * <div style="background: hsl(var(--card)); color: hsl(var(--card-foreground));">
 *   Card content
 * </div>
 * 
 * Or with utility classes:
 * 
 * <div class="bg-card text-foreground rounded-lg shadow-sm">
 *   Card content
 * </div>
 * 
 * Dark Mode Toggle (JavaScript):
 * 
 * document.body.classList.toggle('dark');
 * 
 * Or in Blazor (C#):
 * 
 * await JSRuntime.InvokeVoidAsync("eval", "document.body.classList.toggle('dark')");
 */