// Background colors
$bg-0: #111118;
$bg-1: #18181f;
$bg-2: #1f1f28;
$bg-3: #26263a;

// Border colors
$border-subtle: rgba(255, 255, 255, 0.06);
$border: rgba(255, 255, 255, 0.09);
$border-strong: rgba(255, 255, 255, 0.14);

// Text colors
$text-0: #dcdce4;
$text-1: #a0a0b8;
$text-2: #6c6c84;
$text-3: #4a4a5e;

// Accent colors
$accent: #7c7ef5;
$accent-dim: rgba(124, 126, 245, 0.15);
$accent-text: #9698f7;
$accent-hover: #8b8df7;

// Semantic colors
$success: #3ec97a;
$error: #e45858;
$warning: #d4a037;

// Derived semantic colors with transparency
$error-bg: rgba(228, 88, 88, 0.06);
$error-border: rgba(228, 88, 88, 0.2);
$error-text: #d47070;

$success-bg: rgba(62, 201, 122, 0.08);
$success-border: rgba(62, 201, 122, 0.2);

$warning-bg: rgba(212, 160, 55, 0.06);
$warning-border: rgba(212, 160, 55, 0.15);

// Type badge colors
$type-audio-bg: rgba(139, 92, 246, 0.1);
$type-audio-text: #9d8be0;

$type-video-bg: rgba(200, 72, 130, 0.1);
$type-video-text: #d07eaa;

$type-image-bg: rgba(34, 160, 80, 0.1);
$type-image-text: #5cb97a;

$type-document-bg: rgba(59, 120, 200, 0.1);
$type-document-text: #6ca0d4;

$type-text-bg: rgba(200, 160, 36, 0.1);
$type-text-text: #c4a840;

$type-other-bg: rgba(128, 128, 160, 0.08);

// Action badge colors (audit)
$action-updated-bg: rgba(59, 120, 200, 0.1);
$action-updated-text: #6ca0d4;

$action-collection-bg: rgba(34, 160, 80, 0.1);
$action-collection-text: #5cb97a;

$action-collection-remove-bg: rgba(212, 160, 55, 0.1);
$action-collection-remove-text: #c4a840;

$action-opened-bg: rgba(139, 92, 246, 0.1);
$action-opened-text: #9d8be0;

$action-scanned-bg: rgba(128, 128, 160, 0.08);

// Role badge colors
$role-admin-bg: rgba(139, 92, 246, 0.1);
$role-admin-text: #9d8be0;

$role-editor-bg: rgba(34, 160, 80, 0.1);
$role-editor-text: #5cb97a;

$role-viewer-bg: rgba(59, 120, 200, 0.1);
$role-viewer-text: #6ca0d4;

// Graph colors
$graph-node-fill: #4caf50;
$graph-node-stroke: #388e3c;
$graph-node-hover: #66bb6a;
$graph-node-selected: #5456d6;
$graph-edge-embed: #9d8be0;

// Overlay backgrounds
$overlay-light: rgba(255, 255, 255, 0.03);
$overlay-medium: rgba(255, 255, 255, 0.04);
$overlay-strong: rgba(255, 255, 255, 0.06);
$overlay-subtle: rgba(255, 255, 255, 0.02);

// Inverse overlays (for light backgrounds)
$overlay-inverse-light: rgba(0, 0, 0, 0.06);
$overlay-inverse-medium: rgba(0, 0, 0, 0.08);
$overlay-inverse-strong: rgba(0, 0, 0, 0.12);

// Semantic variants
$error-light: rgba(228, 88, 88, 0.08);
$error-medium: rgba(228, 88, 88, 0.1);
$error-border-light: rgba(228, 88, 88, 0.25);

$success-light: rgba(62, 201, 122, 0.1);

$info-bg: rgba(99, 102, 241, 0.08);
$info-bg-light: rgba(99, 102, 241, 0.12);
$accent-border: rgba(124, 126, 245, 0.2);

$purple-bg: rgba(124, 126, 245, 0.04);
$purple-light: rgba(139, 92, 246, 0.08);
$purple-border: rgba(139, 92, 246, 0.3);

$warning-light: rgba(212, 160, 55, 0.1);
$warning-medium: rgba(212, 160, 55, 0.12);

$green-light: rgba(76, 175, 80, 0.06);
$green-medium: rgba(76, 175, 80, 0.12);
$green-text: #4caf50;

// UI element backgrounds
$btn-danger-hover: rgba(228, 88, 88, 0.08);
$btn-ghost-hover: rgba(255, 255, 255, 0.04);
$btn-secondary-hover: rgba(255, 255, 255, 0.06);

// Media viewer overlays
$media-overlay-bg: rgba(0, 0, 0, 0.92);
$media-overlay-medium: rgba(0, 0, 0, 0.5);
$media-overlay-light: rgba(0, 0, 0, 0.3);
$media-controls-bg: rgba(0, 0, 0, 0.7);

// Image viewer
$image-viewer-toolbar-bg: rgba(0, 0, 0, 0.5);
$image-viewer-border: rgba(255, 255, 255, 0.08);
$image-viewer-btn-bg: rgba(255, 255, 255, 0.06);
$image-viewer-btn-border: rgba(255, 255, 255, 0.1);
$image-viewer-btn-hover: rgba(255, 255, 255, 0.12);

// Shadows
$drop-shadow: rgba(0, 0, 0, 0.5);

// Gradients
$gradient-accent-end: #7c7ef3;
$gradient-success-end: #66bb6a;

// Light theme
$light-bg-0: #f5f5f7;
$light-bg-1: #eeeef0;
$light-bg-2: #ffffff;
$light-bg-3: #e8e8ec;

$light-border-subtle: rgba(0, 0, 0, 0.06);
$light-border: rgba(0, 0, 0, 0.1);
$light-border-strong: rgba(0, 0, 0, 0.16);

$light-text-0: #1a1a2e;
$light-text-1: #555570;
$light-text-2: #8888a0;

$light-accent: #6366f1;
$light-accent-dim: rgba(99, 102, 241, 0.1);
$light-accent-text: #4f52e8;

// Spacing
$space-1: 2px;
$space-2: 4px;
$space-3: 6px;
$space-4: 8px;
$space-5: 10px;
$space-6: 12px;
$space-7: 14px;
$space-8: 16px;
$space-10: 20px;
$space-12: 24px;
$space-16: 32px;
$space-20: 40px;
$space-24: 48px;

// Border radius
$radius-sm: 3px;
$radius: 5px;
$radius-md: 7px;
$radius-lg: 8px;
$radius-xl: 12px;
$radius-full: 50%;

// Shadows
$shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
$shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
$shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.45);
$shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.08);

$light-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
$light-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
$light-shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.12);

// Typography
$font-family-base: 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
$font-family-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
$font-family-mono-alt: 'Menlo', 'Monaco', 'Courier New', monospace;

$font-size-xs: 9px;
$font-size-sm: 10px;
$font-size-base: 11px;
$font-size-md: 12px;
$font-size-lg: 13px;
$font-size-xl: 14px;
$font-size-2xl: 15px;
$font-size-3xl: 16px;
$font-size-4xl: 18px;
$font-size-5xl: 20px;
$font-size-6xl: 28px;
$font-size-7xl: 32px;
$font-size-8xl: 48px;

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

$line-height-tight: 1.2;
$line-height-base: 1.3;
$line-height-normal: 1.4;
$line-height-relaxed: 1.5;
$line-height-loose: 1.7;

$letter-spacing-tight: -0.4px;
$letter-spacing-normal: 0;
$letter-spacing-wide: 0.03em;
$letter-spacing-wider: 0.04em;
$letter-spacing-widest: 0.06em;
$letter-spacing-uppercase: 0.5px;

// Layout dimensions
$sidebar-width: 220px;
$sidebar-collapsed-width: 48px;
$header-height: 48px;

// Z-index scale
$z-base: 0;
$z-dropdown: 10;
$z-sticky: 20;
$z-fixed: 30;
$z-modal-backdrop: 100;
$z-modal: 200;
$z-toast: 300;

// Transitions
$transition-fast: 0.08s;
$transition-base: 0.1s;
$transition-slow: 0.15s;
$transition-slower: 0.2s;
$transition-timing-default: ease;
$transition-timing-smooth: cubic-bezier(0.4, 0, 0.2, 1);