/* Chief Design System Variables */ /* Extracted from Chief desktop app and brand guidelines */ :root { /* Layout */ --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 12px; --spacing-lg: 16px; --spacing-xl: 20px; --spacing-2xl: 24px; --spacing-3xl: 32px; /* Dimensions */ --top-bar-height: 48px; --border-radius-sm: 6px; --border-radius-md: 8px; --border-radius-lg: 12px; --panel-width: 380px; --panel-width-sm: 320px; /* Core Colors */ --color-primary: #4a9eff; --color-primary-dark: #2d7ed8; --color-primary-light: #6ab4ff; --color-success: #7FBA00; --color-warning: #FFB900; --color-danger: #ff4a4a; --color-purple: #8A2BE2; --color-gray: #999999; --color-text: #ffffff; --color-black: #000000; --dark-bg: #0f1f38; /* Text on colored backgrounds */ --color-on-primary: #000000; --color-on-success: #000000; --color-on-danger: #ffffff; /* Text opacity variations */ --color-text-muted: rgb(255 255 255 / 0.6); --color-text-faint: rgb(255 255 255 / 0.4); --color-text-bright: rgb(255 255 255 / 0.9); --color-text-subtle: rgb(255 255 255 / 0.7); --color-text-dimmed: rgb(255 255 255 / 0.8); --color-text-ultra-dim: rgb(255 255 255 / 0.35); /* Key backgrounds */ --color-surface: #1a2d47; --bg-main: rgba(15, 31, 56, 0.97); --bg-main-solid: #0f1f38; --bg-overlay: rgb(from var(--color-black) r g b / 0.6); --bg-overlay-dark: rgb(from var(--color-black) r g b / 0.3); --bg-overlay-darker: rgb(from var(--color-black) r g b / 0.2); --bg-input: rgb(255 255 255 / 0.05); --bg-input-light: rgb(255 255 255 / 0.08); --bg-input-super-faint: rgb(255 255 255 / 0.1); --bg-hover: rgb(from var(--color-primary) r g b / 0.1); /* Additional backgrounds from brand guidelines - Deep Navy Palette */ --bg-dark: #0a1628; --bg-section: #0f1f38; --bg-card: #0f1f38; --bg-elevated: #1a2d4f; /* Key borders */ --border-subtle: rgb(from var(--color-primary) r g b / 0.08); --border-subtle-alt: rgb(from var(--color-primary) r g b / 0.05); --border-subtle-lighter: rgb(from var(--color-primary) r g b / 0.1); --border-default: rgb(from var(--color-primary) r g b / 0.2); --border-hover: rgb(from var(--color-primary) r g b / 0.3); --border-danger: rgb(from var(--color-danger) r g b / 0.3); --border-white-subtle: rgb(255 255 255 / 0.05); --border-white-lighter: rgb(255 255 255 / 0.1); --border: #1a2d4f; --border-light: rgba(74, 158, 255, 0.15); /* Shadows and glows */ --shadow-danger: rgb(from var(--color-danger) r g b / 0.2); --shadow-overlay: rgb(from var(--color-black) r g b / 0.25); --shadow-overlay-dark: rgb(from var(--color-black) r g b / 0.3); --glow-primary: rgb(from var(--color-primary) r g b / 0.8); --glow-primary-subtle: rgb(from var(--color-primary) r g b / 0.2); --shadow-text: rgb(26 31 46); --text-shadow-dark: rgb(from var(--color-black) r g b / 0.8); /* Effects */ --backdrop-filter: blur(20px) saturate(150%); --shadow-sm: 0 4px 12px rgb(from var(--color-black) r g b / 0.2); --shadow-md: 0 8px 32px rgb(from var(--color-black) r g b / 0.4); --shadow-lg: 0 12px 48px rgb(from var(--color-black) r g b / 0.4); --transition-default: all 0.25s ease; --transition-fast: all 0.2s ease; --transition-instant: all 0.08s ease; --transition-slow: all 0.3s ease; /* Glassmorphic enhancements */ --glass-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.025) 100%); --glass-glow: 0 0 30px rgb(from var(--color-primary) r g b / 0.1), 0 0 60px rgb(from var(--color-primary) r g b / 0.05); --glass-border: 1px solid rgba(255, 255, 255, 0.18); --glass-inner-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.1), inset 0 -2px 4px rgba(0, 0, 0, 0.3); /* SVG noise pattern for frosted glass texture */ --glass-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' opacity='0.02'/%3E%3C/svg%3E"); /* Typography Scale */ --font-size-xs: 11px; --font-size-sm: 12px; --font-size-base: 14px; --font-size-md: 16px; --font-size-lg: 20px; --font-size-xl: 24px; --font-size-2xl: 32px; --font-size-3xl: 40px; --font-size-4xl: 56px; --font-size-display: 88px; /* Font Weights */ --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-heavy: 800; --font-weight-black: 900; /* Letter Spacing */ --letter-spacing-display: -4px; --letter-spacing-tight: -2px; --letter-spacing-snug: -1px; --letter-spacing-normal: 0; --letter-spacing-wide: 1px; --letter-spacing-wider: 3px; /* Line Heights */ --line-height-tight: 1; --line-height-snug: 1.25; --line-height-normal: 1.5; --line-height-relaxed: 1.6; --line-height-loose: 2; /* Font Families */ --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-family-mono: 'JetBrains Mono', 'SF Mono', Monaco, 'Cascadia Code', monospace; /* Status Colors (from brand guidelines) */ --color-success-green: #4aff9e; --color-warning-orange: #ff9e4a; --color-error-red: #ff4a4a; /* Z-index Scale */ --z-dropdown: 1000; --z-modal: 2000; --z-overlay: 3000; --z-notification: 4000; --z-tooltip: 5000; /* Light Theme Colors */ --light-bg: #ffffff; --light-bg-subtle: #f8fafc; --light-bg-muted: #f1f5f9; --light-bg-blue: #eff6ff; --light-bg-blue-strong: #dbeafe; --light-text: #0f172a; --light-text-secondary: #475569; --light-text-muted: #94a3b8; --light-border: #e2e8f0; --light-border-strong: #cbd5e1; } /* Dark mode is default, but provide light mode variables for future use */ @media (prefers-color-scheme: light) { :root.light-mode { --color-text: #000000; --color-text-muted: rgb(0 0 0 / 0.6); --color-text-faint: rgb(0 0 0 / 0.4); --bg-main: rgba(255, 255, 255, 0.95); --bg-card: #ffffff; --bg-elevated: #f8f8f8; --border: #e0e0e0; --border-light: #d0d0d0; } }