tauri-plugin-decor 1.0.1

:root {
  --primary-50:  #eff6ff;
  --primary-100: #dbeafe;
  --primary-200: #bfdbfe;
  --primary-300: #93c5fd;
  --primary-400: #60a5fa;
  --primary-500: #3b82f6;
  --primary-600: #2563eb;
  --primary-700: #1d4ed8;
  --primary-800: #1e40af;
  --primary-900: #1e3a8a;

  --success-50:  #ecfdf5;
  --success-100: #d1fae5;
  --success-300: #6ee7b7;
  --success-400: #34d399;
  --success-500: #10b981;
  --success-600: #059669;

  --warning-50:  #fffbeb;
  --warning-100: #fef3c7;
  --warning-300: #fcd34d;
  --warning-400: #fbbf24;
  --warning-500: #f59e0b;
  --warning-600: #d97706;

  --danger-50:  #fef2f2;
  --danger-100: #fee2e2;
  --danger-300: #fca5a5;
  --danger-400: #f87171;
  --danger-500: #ef4444;
  --danger-600: #dc2626;

  --info-100: #e0e7ff;
  --info-400: #818cf8;
  --info-500: #6366f1;
  --info-600: #4f46e5;

  --gray-0:   #ffffff;
  --gray-50:  #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  /* Light Theme (default) */
  --bg-app:       #fafbfc;
  --bg-primary:   #ffffff;
  --bg-secondary: #f5f6f8;
  --bg-tertiary:  #f3f4f6;
  --bg-hover:     #f1f5f9;
  --bg-active:    #e2e8f0;
  --bg-overlay:   rgba(255, 255, 255, 0.96);

  --text-primary:   #1f2937;
  --text-secondary: #4b5563;
  --text-tertiary:  #6b7280;
  --text-inverse:   #ffffff;
  --text-accent:    #2563eb;
  --text-disabled:  #9ca3af;

  --primary:         #2563eb;
  --primary-hover:   #1d4ed8;
  --primary-selected: #dbeafe;
  --success:  #10b981;
  --warning:  #f59e0b;
  --danger:   #ef4444;
  --info:     #6366f1;

  --color-error:    var(--danger);
  --color-warning:  var(--warning);
  --color-text-muted: var(--text-tertiary);

  --border-light:    #e5e7eb;
  --border-medium:   #d1d5db;
  --border-strong:   #9ca3af;
  --border-accent:   #3b82f6;
  --border-controls: rgba(0, 0, 0, 0.35);

  --focus-ring: #3b82f6;

  --control-bg:           #f8f9fa;
  --control-bg-hover:     #f3f4f6;
  --control-bg-active:    #e5e7eb;
  --control-border:       #d1d5db;
  --control-border-hover: #b0b7c0;
  --control-text:         #1f2937;

  --panel-bg:         #ffffff;
  --panel-border:     #e5e7eb;
  --panel-header-bg:  #f8f9fa;

  --overlay-hover:    rgba(15, 23, 42, 0.06);
  --overlay-selected: rgba(37, 99, 235, 0.14);
  --overlay-focus:    rgba(59, 130, 246, 0.15);

  /* Typography */
  --font-family-base: 'Segoe UI', sans-serif;

  --font-size-xs:   clamp(0.625rem, 0.5625rem + 0.15vw, 0.6875rem);
  --font-size-sm:   clamp(0.6875rem, 0.625rem + 0.15vw, 0.75rem);
  --font-size-base: clamp(0.8125rem, 0.75rem + 0.15vw, 0.875rem);
  --font-size-md:   0.9375rem;
  --font-size-lg:   clamp(1.0625rem, 1rem + 0.15vw, 1.125rem);
  --font-size-xl:  clamp(1.1875rem, 1.125rem + 0.2vw, 1.3125rem);

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

  --line-height-tight:   1.25;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.75;

  --letter-spacing-tight:  -0.025em;
  --letter-spacing-normal:  0;
  --letter-spacing-wide:    0.025em;
  --letter-spacing-wider:   0.5px;

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

  --titlebar-height: 2.5rem;
  --toolbar-height:  3.5rem;
  --statusbar-height: 1.625rem;
  --content-max-width: 54rem;

  /* Border Radius */
  --radius-sm:   0.125rem;
  --radius-base: 0.25rem;
  --radius-md:   0.375rem;
  --radius-lg:   0.5rem;
  --radius-xl:   0.75rem;
  --radius-2xl:  1rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:      0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-base:    0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px 0 rgba(0,0,0,0.06);
  --shadow-md:      0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
  --shadow-lg:      0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
  --shadow-card:    var(--shadow-md);
  --shadow-primary: 0 1px 2px 0 rgba(0, 0, 0, 0.08);

  /* Animation */
  --duration-fast:   100ms;
  --duration-normal: 150ms;
  --duration-medium: 200ms;
  --duration-slow:   250ms;

  --easing-ease:         ease;
  --easing-ease-out:     ease-out;
  --easing-ease-in-out:  ease-in-out;

  /* Z-index */
  --z-base:     0;
  --z-titlebar: 100;
  --z-dropdown: 150;
  --z-modal:    1000;
  --z-tooltip:  1700;
}

/* Dark Theme */
[data-theme="dark"] {
  --bg-app:       #1a1a1a;
  --bg-primary: #1e1e1e;
  --bg-secondary: #1a1a1a;
  --bg-tertiary:  #363636;
  --bg-overlay:   rgba(28, 28, 28, 0.95);
  --bg-hover:     #414141;
  --bg-active:    #505050;

  --text-primary:   #f0f0f0;
  --text-secondary: #c8c8c8;
  --text-tertiary:  #909090;
  --text-inverse:   #121212;
  --text-accent:    #60a5fa;
  --text-disabled:  #6a6a6a;

  --primary:          #3b82f6;
  --primary-hover:    #60a5fa;
  --primary-selected: rgba(96, 165, 250, 0.2);

  --color-error:    var(--danger);
  --color-warning:  var(--warning);
  --color-text-muted: var(--text-tertiary);

  --border-light:    #3e3e3e;
  --border-medium:   #505050;
  --border-strong:   #686868;
  --border-accent:   #60a5fa;
  --border-controls: rgba(255, 255, 255, 0.35);

  --control-bg:           #2c2c2c;
  --control-bg-hover:     #363636;
  --control-bg-active:    #404040;
  --control-border:       #3e3e3e;
  --control-border-hover: #505050;
  --control-text:         #f0f0f0;

  --panel-bg:        #2c2c2c;
  --panel-border:    #3e3e3e;
  --panel-header-bg: #252525;

  --overlay-hover:    rgba(255, 255, 255, 0.08);
  --overlay-selected: rgba(96, 165, 250, 0.2);
  --overlay-focus:    rgba(96, 165, 250, 0.20);

  --shadow-sm:   0 1px 2px 0 rgba(0,0,0,0.4);
  --shadow-base: 0 1px 3px 0 rgba(0,0,0,0.5), 0 1px 2px 0 rgba(0,0,0,0.4);
  --shadow-md:   0 4px 6px -1px rgba(0,0,0,0.5), 0 2px 4px -1px rgba(0,0,0,0.4);
  --shadow-lg:   0 10px 15px -3px rgba(0,0,0,0.6), 0 4px 6px -2px rgba(0,0,0,0.4);
}