:root {
  /* ===========================================
     REFINED TECHNICAL DESIGN SYSTEM
     A distinctive, elegant aesthetic for Agentify
     =========================================== */

  /* Colors - Dark theme (default) */
  --color-background: #09090b;
  --color-background-subtle: #0c0c0e;
  --color-surface: #111113;
  --color-surface-raised: #18181b;
  --color-surface-elevated: #1f1f23;
  --color-surface-subtle: #18181b;
  --color-surface-hover: rgba(255, 255, 255, 0.04);
  --color-surface-active: rgba(255, 255, 255, 0.06);

  /* Border colors - refined with subtle warmth */
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-light: rgba(255, 255, 255, 0.04);
  --color-border-hover: rgba(255, 255, 255, 0.12);
  --color-border-subtle: rgba(255, 255, 255, 0.06);
  --color-border-focus: rgba(168, 85, 247, 0.4);

  /* Typography colors - improved contrast */
  --color-text: rgba(255, 255, 255, 0.92);
  --color-text-muted: rgba(255, 255, 255, 0.64);
  --color-text-subtle: rgba(255, 255, 255, 0.44);
  --color-text-secondary: var(--color-text-muted);
  --color-text-emphasis: #ffffff;

  /* Primary - Refined violet with better saturation */
  --color-primary: #a855f7;
  --color-primary-hover: #9333ea;
  --color-primary-active: #7e22ce;
  --color-primary-surface: rgba(168, 85, 247, 0.12);
  --color-primary-border: rgba(168, 85, 247, 0.24);
  --color-primary-glow: rgba(168, 85, 247, 0.2);

  /* Status colors - more vibrant */
  --color-success: #22c55e;
  --color-success-surface: rgba(34, 197, 94, 0.12);
  --color-success-50: rgba(34, 197, 94, 0.06);
  --color-success-200: rgba(34, 197, 94, 0.2);
  --color-success-700: #15803d;

  --color-error: #ef4444;
  --color-error-surface: rgba(239, 68, 68, 0.12);
  --color-error-50: rgba(239, 68, 68, 0.06);
  --color-error-200: rgba(239, 68, 68, 0.2);
  --color-error-700: #dc2626;

  --color-warning: #f59e0b;
  --color-warning-surface: rgba(245, 158, 11, 0.12);
  --color-warning-700: #d97706;

  /* Badge color variants */
  --color-green-100: rgba(34, 197, 94, 0.12);
  --color-green-800: #22c55e;
  --color-blue-100: rgba(59, 130, 246, 0.12);
  --color-blue-800: #3b82f6;
  --color-purple-100: rgba(168, 85, 247, 0.12);
  --color-purple-800: #a855f7;
  --color-gray-100: rgba(161, 161, 170, 0.12);
  --color-gray-600: #a1a1aa;

  /* Utility aliases */
  --color-danger: var(--color-error);
  --color-danger-surface: var(--color-error-surface);
  --color-danger-700: var(--color-error-700);

  /* Overlay colors */
  --color-overlay: rgba(0, 0, 0, 0.7);
  --color-overlay-light: rgba(0, 0, 0, 0.5);

  /* Gradient accents - distinctive visual flair */
  --gradient-primary: linear-gradient(135deg, #a855f7 0%, #6366f1 100%);
  --gradient-accent: linear-gradient(135deg, #f472b6 0%, #a855f7 100%);
  --gradient-warm: linear-gradient(135deg, #fb923c 0%, #f472b6 100%);
  --gradient-cool: linear-gradient(135deg, #22d3ee 0%, #6366f1 100%);
  --gradient-success: linear-gradient(135deg, #22c55e 0%, #14b8a6 100%);

  /* Legacy gradient aliases */
  --gradient-persona: var(--gradient-primary);
  --gradient-memory: var(--gradient-accent);
  --gradient-context: var(--gradient-cool);
  --gradient-stats: var(--gradient-success);
  --gradient-status: var(--gradient-warm);

  /* Noise/texture overlay */
  --texture-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");

  /* Typography scale - refined proportions */
  --text-xs: 0.6875rem;   /* 11px */
  --text-sm: 0.8125rem;   /* 13px */
  --text-base: 0.9375rem; /* 15px */
  --text-lg: 1.0625rem;   /* 17px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.875rem;   /* 30px */
  --text-4xl: 2.25rem;    /* 36px */

  /* Font weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* Line heights */
  --leading-none: 1;
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* Spacing scale - harmonious rhythm */
  --spacing-px: 1px;
  --spacing-0: 0;
  --spacing-xs: 0.25rem;   /* 4px */
  --spacing-sm: 0.5rem;    /* 8px */
  --spacing-md: 0.75rem;   /* 12px */
  --spacing-lg: 1rem;      /* 16px */
  --spacing-xl: 1.5rem;    /* 24px */
  --spacing-2xl: 2rem;     /* 32px */
  --spacing-3xl: 3rem;     /* 48px */
  --spacing-4xl: 4rem;     /* 64px */

  /* Border radius - more refined */
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* Breakpoints */
  --breakpoint-mobile: 640px;
  --breakpoint-tablet: 1024px;
  --breakpoint-desktop: 1280px;

  /* Layout */
  --nav-width: 240px;
  --sidebar-width: 320px;
  --header-height: 56px;
  --content-max-width: 1200px;

  /* Z-index scale */
  --z-base: 0;
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-fixed: 30;
  --z-modal-backdrop: 40;
  --z-modal: 50;
  --z-popover: 60;
  --z-tooltip: 70;

  /* Legacy z-index aliases */
  --z-header: var(--z-sticky);

  /* Message specific */
  --message-max-width: 85%;

  /* Shadow system - layered depth */
  --shadow-color: 0 0% 0%;
  --shadow-xs: 0 1px 2px hsl(var(--shadow-color) / 0.2);
  --shadow-sm: 0 1px 3px hsl(var(--shadow-color) / 0.25), 0 1px 2px hsl(var(--shadow-color) / 0.2);
  --shadow-md: 0 4px 6px hsl(var(--shadow-color) / 0.25), 0 2px 4px hsl(var(--shadow-color) / 0.2);
  --shadow-lg: 0 10px 15px hsl(var(--shadow-color) / 0.3), 0 4px 6px hsl(var(--shadow-color) / 0.2);
  --shadow-xl: 0 20px 25px hsl(var(--shadow-color) / 0.35), 0 8px 10px hsl(var(--shadow-color) / 0.2);
  --shadow-glow: 0 0 20px var(--color-primary-glow);
  --shadow-inner: inset 0 2px 4px hsl(var(--shadow-color) / 0.15);

  /* Animation timing */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
}

/* Light theme - warm and inviting */
html[data-theme="light"] {
  --color-background: #fafaf9;
  --color-background-subtle: #f5f5f4;
  --color-surface: #ffffff;
  --color-surface-raised: #f5f5f4;
  --color-surface-elevated: #e7e5e4;
  --color-surface-subtle: #fafaf9;
  --color-surface-hover: rgba(0, 0, 0, 0.03);
  --color-surface-active: rgba(0, 0, 0, 0.05);

  --color-border: rgba(0, 0, 0, 0.08);
  --color-border-light: rgba(0, 0, 0, 0.04);
  --color-border-hover: rgba(0, 0, 0, 0.12);
  --color-border-subtle: rgba(0, 0, 0, 0.06);
  --color-border-focus: rgba(147, 51, 234, 0.4);

  --color-text: rgba(0, 0, 0, 0.87);
  --color-text-muted: rgba(0, 0, 0, 0.6);
  --color-text-subtle: rgba(0, 0, 0, 0.4);
  --color-text-secondary: var(--color-text-muted);
  --color-text-emphasis: #0c0a09;

  --color-primary: #9333ea;
  --color-primary-hover: #7e22ce;
  --color-primary-active: #6b21a8;
  --color-primary-surface: rgba(147, 51, 234, 0.08);
  --color-primary-border: rgba(147, 51, 234, 0.2);
  --color-primary-glow: rgba(147, 51, 234, 0.15);

  --color-success-surface: rgba(34, 197, 94, 0.08);
  --color-error-surface: rgba(239, 68, 68, 0.08);
  --color-warning-surface: rgba(245, 158, 11, 0.08);

  --color-green-100: rgba(34, 197, 94, 0.08);
  --color-blue-100: rgba(59, 130, 246, 0.08);
  --color-purple-100: rgba(147, 51, 234, 0.08);
  --color-gray-100: rgba(120, 113, 108, 0.08);

  --color-overlay: rgba(0, 0, 0, 0.4);
  --color-overlay-light: rgba(0, 0, 0, 0.2);

  --shadow-color: 20 14% 10%;
  --shadow-xs: 0 1px 2px hsl(var(--shadow-color) / 0.06);
  --shadow-sm: 0 1px 3px hsl(var(--shadow-color) / 0.08), 0 1px 2px hsl(var(--shadow-color) / 0.06);
  --shadow-md: 0 4px 6px hsl(var(--shadow-color) / 0.1), 0 2px 4px hsl(var(--shadow-color) / 0.06);
  --shadow-lg: 0 10px 15px hsl(var(--shadow-color) / 0.1), 0 4px 6px hsl(var(--shadow-color) / 0.05);
  --shadow-xl: 0 20px 25px hsl(var(--shadow-color) / 0.12), 0 8px 10px hsl(var(--shadow-color) / 0.05);
}

/* Legacy class support */
.theme-light {
  --color-background: #fafaf9;
  --color-background-subtle: #f5f5f4;
  --color-surface: #ffffff;
  --color-surface-raised: #f5f5f4;
  --color-surface-elevated: #e7e5e4;
  --color-surface-subtle: #fafaf9;
  --color-surface-hover: rgba(0, 0, 0, 0.03);

  --color-border: rgba(0, 0, 0, 0.08);
  --color-border-light: rgba(0, 0, 0, 0.04);
  --color-border-hover: rgba(0, 0, 0, 0.12);
  --color-border-subtle: rgba(0, 0, 0, 0.06);

  --color-text: rgba(0, 0, 0, 0.87);
  --color-text-muted: rgba(0, 0, 0, 0.6);
  --color-text-subtle: rgba(0, 0, 0, 0.4);
  --color-text-secondary: var(--color-text-muted);
  --color-text-emphasis: #0c0a09;
}

.theme-dark {
  /* Inherits from :root */
}