/* ============================================
ABSTRACTS: CSS Custom Properties (Variables)
============================================
Design System: Obsidian Aurora
Premium Dark Trading Platform
============================================ */
/* Google Fonts load via in each page's
(not @import here) — @import forces an extra serial round-trip before the
browser even knows the font URL, which is a real contributor to the FOUC seen
on fast reloads. Keep the family/weight list below in sync with the
query string wherever this file is used: Inter 400;500;600;700;800,
JetBrains Mono 400;500;600, Instrument Serif ital@0;1. */
:root {
/* =================== Color Palette โ€” Monochrome Obsidian =================== */
/* Brand Colors โ€” Monochrome (white/gray for dark mode) */
--color-primary: #FFFFFF;
--color-primary-light: #D0D6E2;
--color-primary-dark: #B8C0D0;
--color-secondary: #64748b;
--color-success: #22c55e;
--color-success-light: rgba(34, 197, 94, 0.12);
--color-danger: #ef4444;
--color-danger-light: rgba(239, 68, 68, 0.12);
--color-warning: #f59e0b;
--color-warning-light: rgba(245, 158, 11, 0.12);
--color-info: #6EA8FF;
--color-info-light: rgba(110, 168, 255, 0.12);
/* Accent Colors โ€” Monochrome */
--color-accent: #B8C0D0;
--color-accent-light: #D0D6E2;
/* Semantic Aliases (backward compatibility โ€” app.js references) */
--primary-color: var(--color-primary);
--secondary-color: var(--color-secondary);
--success-color: var(--color-success);
--danger-color: var(--color-danger);
--warning-color: var(--color-warning);
--info-color: var(--color-info);
/* =================== Background Colors (Default: Dark) =================== */
/* App backgrounds โ€” Solid black */
--app-bg-1: #000000;
--app-bg-2: #000000;
/* Surface colors (cards, panels) โ€” Tonal layering */
--surface-0: #0A0D14; /* sunken: input/code backgrounds (below card) */
--surface: #11151F;
--surface-2: #1A1F2C;
--surface-3: #242B3D;
--color-surface: var(--surface);
/* Sidebar specific */
--sidebar-bg: #000000;
--sidebar-hover: rgba(255, 255, 255, 0.06);
/* =================== Text Colors =================== */
--text: #E4E8F1; /* NEVER use pure #FFF */
--text-dim: #8E99B0;
--text-primary: var(--text);
--text-secondary: var(--text-dim);
--color-text-primary: var(--text);
--color-text-secondary: var(--text-dim);
--color-text-muted: #5A6478;
/* =================== Gray Scale (mapped to Obsidian tones) =================== */
--color-gray-50: #283040;
--color-gray-100: #1E2435;
--color-gray-200: #242D45;
--color-gray-300: #3A4258;
--color-gray-400: #5A6478;
--color-gray-500: #8E99B0;
--color-gray-600: #8E99B0;
--color-gray-700: #B8C0D0;
--color-gray-800: #D0D6E2;
--color-gray-900: #E4E8F1;
/* =================== Border & Effects =================== */
--border: rgba(255, 255, 255, 0.06);
--border-color: var(--border);
--color-border: var(--border);
--shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
/* Elevation System — layered shadows for visual depth */
--elevation-1: 0 1px 3px rgba(0, 0, 0, 0.24), 0 2px 8px rgba(0, 0, 0, 0.18);
--elevation-2: 0 2px 6px rgba(0, 0, 0, 0.28), 0 6px 20px rgba(0, 0, 0, 0.22);
--elevation-3: 0 4px 12px rgba(0, 0, 0, 0.32), 0 12px 40px rgba(0, 0, 0, 0.28);
--elevation-4: 0 8px 20px rgba(0, 0, 0, 0.36), 0 20px 60px rgba(0, 0, 0, 0.32);
/* Surface highlight — subtle top-edge glow on raised elements */
--surface-highlight: rgba(255, 255, 255, 0.04);
--surface-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);
--radius: 14px;
--radius-sm: 10px;
--radius-lg: 18px;
--radius-full: 999px;
/* Border Radius Aliases */
--border-radius-sm: var(--radius-sm);
--border-radius-md: var(--radius);
--border-radius-lg: var(--radius-lg);
--border-radius-full: var(--radius-full);
/* =================== Glass & Glow Effects =================== */
--glass-bg: rgba(23, 28, 40, 0.8);
--glass-border: rgba(255, 255, 255, 0.06);
--glass-blur: blur(20px);
--glow-primary: 0 0 20px rgba(255, 255, 255, 0.08);
--glow-success: 0 0 20px rgba(34, 197, 94, 0.15);
--glow-danger: 0 0 20px rgba(239, 68, 68, 0.15);
--glow-accent: 0 0 20px rgba(255, 255, 255, 0.08);
/* Gradients โ€” Monochrome */
--gradient-primary: linear-gradient(135deg, #FFFFFF 0%, #B8C0D0 100%);
--gradient-premium: linear-gradient(135deg, #D0D6E2 0%, #FFFFFF 100%);
--gradient-success: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
/* =================== Focus States =================== */
--focus-ring: 0 0 0 3px rgba(255, 255, 255, 0.15);
--focus: var(--focus-ring);
/* =================== Transitions =================== */
--transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
--transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
--transition-normal: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
/* =================== Layout =================== */
--sidebar-width: 248px;
--sidebar-collapsed-width: 70px;
--container-max-width: 1400px;
--header-height: auto;
/* =================== Typography =================== */
--font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
--font-sans: var(--font-family);
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
--font-mono-alt: 'JetBrains Mono', 'Courier New', monospace;
--font-family-mono: var(--font-mono);
--font-serif: 'Instrument Serif', Georgia, serif;
/* Font Sizes */
--font-size-xs: 0.75rem;
--font-size-sm: 0.85rem;
--font-size-base: 1rem;
--font-size-lg: 1.1rem;
--font-size-xl: 1.25rem;
--font-size-2xl: 1.5rem;
--font-size-3xl: 1.75rem;
/* Font Weights */
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
/* Line Heights */
--line-height-tight: 1.2;
--line-height-normal: 1.5;
--line-height-relaxed: 1.6;
/* =================== Spacing Scale =================== */
--spacing-1: 4px;
--spacing-2: 8px;
--spacing-3: 12px;
--spacing-4: 16px;
--spacing-5: 20px;
--spacing-6: 24px;
--spacing-8: 32px;
--spacing-10: 40px;
--spacing-12: 48px;
/* Spacing Aliases */
--spacing-xs: var(--spacing-1);
--spacing-sm: var(--spacing-2);
--spacing-md: var(--spacing-4);
--spacing-lg: var(--spacing-6);
--spacing-xl: var(--spacing-8);
--spacing-2xl: var(--spacing-12);
/* =================== Z-Index Scale =================== */
--z-dropdown: 100;
--z-sticky: 500;
--z-sidebar: 1000;
--z-sidebar-toggle: 1001;
--z-loading: 9999;
--z-modal: 10001;
--z-toast: 10010;
/* Z-Index Aliases */
--z-index-dropdown: var(--z-dropdown);
--z-index-sticky: var(--z-sticky);
--z-index-fixed: var(--z-sidebar);
--z-index-modal: var(--z-modal);
--z-index-toast: var(--z-toast);
/* =================== Status Colors (with alpha) =================== */
--status-online-bg: rgba(34, 197, 94, 0.12);
--status-online-border: rgba(34, 197, 94, 0.30);
--status-offline-bg: rgba(239, 68, 68, 0.12);
--status-offline-border: rgba(239, 68, 68, 0.30);
--status-loading-bg: rgba(245, 158, 11, 0.12);
--status-loading-border: rgba(245, 158, 11, 0.30);
--status-pause-bg: rgba(245, 158, 11, 0.12);
--status-pause-border: rgba(245, 158, 11, 0.30);
/* =================== Component-Specific Tokens =================== */
--bg-primary: var(--surface);
--bg-secondary: var(--surface-2);
--bg-tertiary: var(--surface-3);
--card-bg: var(--surface);
/* Table Tokens */
--table-header-bg: #121620;
--table-row-hover: rgba(255, 255, 255, 0.04);
--table-border-color: var(--border);
/* Toast Tokens */
--toast-background: var(--surface);
--toast-shadow: var(--shadow-lg);
}