/* ========================================================================== CSS Custom Properties — ShipHero AI Dashboard Design tokens for colors, spacing, typography, layout, and effects. ========================================================================== */ :root { /* ------------------------------------------------------------------- Colors — Primary ------------------------------------------------------------------- */ --color-primary: #3b82f6; --color-primary-hover: #2563eb; --color-primary-active: #1d4ed8; --color-primary-light: #dbeafe; --color-primary-50: #eff6ff; /* ------------------------------------------------------------------- Colors — Neutral / Gray Scale ------------------------------------------------------------------- */ --color-white: #ffffff; --color-gray-50: #f8fafc; --color-gray-100: #f1f5f9; --color-gray-200: #e2e8f0; --color-gray-300: #cbd5e1; --color-gray-400: #94a3b8; --color-gray-500: #64748b; --color-gray-600: #475569; --color-gray-700: #334155; --color-gray-800: #1e293b; --color-gray-900: #0f172a; /* ------------------------------------------------------------------- Colors — Surface & Background ------------------------------------------------------------------- */ --color-surface: #f8fafc; --color-surface-raised: #ffffff; --color-sidebar: #1e293b; --color-sidebar-hover: rgba(255, 255, 255, 0.08); /* ------------------------------------------------------------------- Colors — Semantic ------------------------------------------------------------------- */ --color-success: #22c55e; --color-success-hover: #16a34a; --color-success-light: #dcfce7; --color-success-100: #dcfce7; --color-success-700: #15803d; --color-warning: #f59e0b; --color-warning-hover: #d97706; --color-warning-light: #fef3c7; --color-warning-100: #fef3c7; --color-warning-700: #b45309; --color-danger: #ef4444; --color-danger-hover: #dc2626; --color-danger-active: #b91c1c; --color-danger-light: #fee2e2; --color-danger-100: #fee2e2; --color-danger-700: #b91c1c; --color-info: #3b82f6; --color-info-light: #dbeafe; --color-info-100: #dbeafe; --color-info-700: #1d4ed8; /* ------------------------------------------------------------------- Colors — Text ------------------------------------------------------------------- */ --color-text: #0f172a; --color-text-secondary: #475569; --color-text-muted: #64748b; --color-text-placeholder: #94a3b8; --color-text-inverse: #ffffff; /* ------------------------------------------------------------------- Colors — Borders ------------------------------------------------------------------- */ --color-border: #e2e8f0; --color-border-light: #f1f5f9; --color-border-focus: #3b82f6; /* ------------------------------------------------------------------- Spacing Scale ------------------------------------------------------------------- */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; /* ------------------------------------------------------------------- Typography — Font Family ------------------------------------------------------------------- */ --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif; --font-family-mono: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", "Cascadia Code", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* ------------------------------------------------------------------- Typography — Font Sizes ------------------------------------------------------------------- */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.75rem; /* 28px */ /* ------------------------------------------------------------------- Typography — Line Heights ------------------------------------------------------------------- */ --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.625; /* ------------------------------------------------------------------- Typography — Font Weights ------------------------------------------------------------------- */ --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* ------------------------------------------------------------------- Border Radius ------------------------------------------------------------------- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 9999px; /* ------------------------------------------------------------------- Shadows ------------------------------------------------------------------- */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.05); /* ------------------------------------------------------------------- Layout Dimensions ------------------------------------------------------------------- */ --sidebar-width: 240px; --sidebar-width-collapsed: 72px; --chat-max-width: 720px; /* ------------------------------------------------------------------- Transitions ------------------------------------------------------------------- */ --transition-fast: 150ms ease; --transition-normal: 250ms ease; /* ------------------------------------------------------------------- Z-Index Scale ------------------------------------------------------------------- */ --z-sidebar: 100; --z-topbar: 200; --z-overlay: 300; --z-chat: 250; --z-toast: 400; }