/* ===== AMOM Design System — Variables ===== */

/* === Light Mode (DEFAULT) === */
:root, [data-theme="light"] {
  /* Color Palette */
  --color-bg:         #F8FAFC;
  --color-bg-alt:     #F1F5F9;
  --color-surface:    #FFFFFF;
  --color-surface2:   #F1F5F9;
  --color-surface3:   #E2E8F0;
  --color-border:     rgba(203, 213, 225, 0.7);
  --color-border2:    rgba(148, 163, 184, 0.5);

  --sidebar-bg:       linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
  --header-bg:        rgba(255, 255, 255, 0.85);

  /* Primary gradient */
  --color-primary:        #0284C7;
  --color-primary-dark:   #0369A1;
  --color-primary-darker: #075985;
  --color-secondary:      #0D9488;
  --color-secondary-dark: #0F766E;
  --color-accent:         #7C3AED;
  --color-accent-dark:    #6D28D9;

  /* Semantic colors */
  --color-success:    #059669;
  --color-success-bg: rgba(16, 185, 129, 0.12);
  --color-warning:    #D97706;
  --color-warning-bg: rgba(245, 158, 11, 0.12);
  --color-danger:     #DC2626;
  --color-danger-bg:  rgba(239, 68, 68, 0.12);
  --color-info:       #2563EB;
  --color-info-bg:    rgba(59, 130, 246, 0.12);

  /* Text */
  --color-text:        #0F172A;
  --color-text-muted:  #475569;
  --color-text-subtle: #64748B;

  /* Gradients */
  --gradient-primary:   linear-gradient(135deg, #0284C7, #0D9488);
  --gradient-secondary: linear-gradient(135deg, #7C3AED, #2563EB);
  --gradient-warm:      linear-gradient(135deg, #D97706, #DC2626);
  --gradient-surface:   linear-gradient(135deg, #FFFFFF, #F8FAFC);
  --gradient-card:      linear-gradient(145deg, #FFFFFF, #F8FAFC);

  /* Shadows */
  --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.06), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-lg:  0 10px 25px rgba(0,0,0,0.08), 0 4px 10px rgba(0,0,0,0.04);
  --shadow-xl:  0 20px 40px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.05);
  --shadow-glow-primary:   0 0 15px rgba(2,132,199,0.2);
  --shadow-glow-secondary: 0 0 15px rgba(13,148,136,0.2);

  color-scheme: light;
}

/* === Dark Mode === */
[data-theme="dark"] {
  /* Color Palette */
  --color-bg:         #0A0F1E;
  --color-bg-alt:     #0F172A;
  --color-surface:    #1E293B;
  --color-surface2:   #263349;
  --color-surface3:   #2D3F5A;
  --color-border:     rgba(99, 155, 220, 0.15);
  --color-border2:    rgba(99, 155, 220, 0.25);

  --sidebar-bg:       linear-gradient(180deg, #0D1629 0%, #0A0F1E 100%);
  --header-bg:        rgba(10, 15, 30, 0.8);

  --color-primary:        #38BDF8;
  --color-primary-dark:   #0EA5E9;
  --color-primary-darker: #0284C7;
  --color-secondary:      #2DD4BF;
  --color-secondary-dark: #14B8A6;
  --color-accent:         #A78BFA;
  --color-accent-dark:    #8B5CF6;

  --color-success:    #34D399;
  --color-success-bg: rgba(52, 211, 153, 0.12);
  --color-warning:    #FBBF24;
  --color-warning-bg: rgba(251, 191, 36, 0.12);
  --color-danger:     #F87171;
  --color-danger-bg:  rgba(248, 113, 113, 0.12);
  --color-info:       #60A5FA;
  --color-info-bg:    rgba(96, 165, 250, 0.12);

  --color-text:        #F0F6FF;
  --color-text-muted:  #94A3B8;
  --color-text-subtle: #64748B;

  --gradient-primary:   linear-gradient(135deg, #0EA5E9, #14B8A6);
  --gradient-secondary: linear-gradient(135deg, #8B5CF6, #3B82F6);
  --gradient-warm:      linear-gradient(135deg, #F59E0B, #EF4444);
  --gradient-surface:   linear-gradient(135deg, #1E293B, #263349);
  --gradient-card:      linear-gradient(145deg, rgba(30,41,59,0.9), rgba(38,51,73,0.9));

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.25);
  --shadow-lg:  0 10px 30px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.3);
  --shadow-xl:  0 20px 50px rgba(0,0,0,0.5), 0 8px 20px rgba(0,0,0,0.35);
  --shadow-glow-primary:   0 0 20px rgba(14,165,233,0.3), 0 0 40px rgba(14,165,233,0.1);
  --shadow-glow-secondary: 0 0 20px rgba(20,184,166,0.3), 0 0 40px rgba(20,184,166,0.1);

  color-scheme: dark;
}

/* === Shared System Variables === */
:root {
  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

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

  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  /* Spacing */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;

  /* Borders */
  --radius-sm:   0.375rem;
  --radius-md:   0.625rem;
  --radius-lg:   0.875rem;
  --radius-xl:   1.125rem;
  --radius-2xl:  1.5rem;
  --radius-full: 9999px;

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

  /* Layout */
  --sidebar-width:          260px;
  --sidebar-collapsed-width: 70px;
  --header-height:          64px;
  --content-max-width:      1400px;

  /* Z-index */
  --z-base:    1;
  --z-sidebar: 100;
  --z-header:  200;
  --z-modal:   1000;
  --z-toast:   2000;
  --z-tooltip: 3000;
}