/** * MarketFox Design Base * Apple-style Design System * * Правило радиусов: outer r = inner r + padding */ :root { /* ============================================ * GRAY SCALE (from design_base contrast ratios) * Target contrast ratio from gray-100 * ============================================ */ --gray-900: #1d1d1f; /* 12.80 - Text content */ --gray-800: #3a3a3c; /* 8.00 - Text content */ --gray-700: #48484a; /* 4.67 - Text content */ --gray-600: #636366; /* 3.00 - Placeholder text */ --gray-500: #8e8e93; /* 1.92 - Disabled text */ --gray-400: #aeaeb2; /* 1.50 */ --gray-300: #d1d1d6; /* 1.19 */ --gray-200: #e5e5e7; /* 1.10 */ --gray-100: #f5f5f7; /* 1.00 - Base background */ --gray-75: #f7f7f8; /* 1.04 - Alternate background */ --gray-50: #fafafa; /* 1.09 */ /* ============================================ * COLORFUL PALETTE (from design_base RGB values) * ============================================ */ --color-danger: #FF3B30; /* R255 G59 B48 - danger, cancel, delete */ --color-warning: #FF9500; /* R255 G149 B0 - warning */ --color-yellow: #FFCC00; /* R255 G204 B0 */ --color-success: #34C759; /* R52 G199 B89 - success, ok, save */ --color-cyan: #5AC8FA; /* R90 G200 B250 */ --color-primary: #007AFF; /* R0 G122 B255 - primary, link */ --color-purple: #5856D6; /* R88 G86 B214 */ --color-pink: #FF2D55; /* R255 G45 B85 */ /* ============================================ * LEGACY ALIASES (for backward compatibility) * ============================================ */ --apple-gray-100: var(--gray-100); --apple-gray-200: var(--gray-200); --apple-gray-300: var(--gray-300); --apple-gray-400: var(--gray-400); --apple-gray-500: var(--gray-500); --apple-gray-600: var(--gray-600); --apple-gray-700: var(--gray-700); --apple-gray-800: var(--gray-800); --apple-gray-900: var(--gray-900); --apple-blue: var(--color-primary); --apple-green: var(--color-success); --apple-red: var(--color-danger); --apple-orange: var(--color-warning); --apple-glass: rgba(255, 255, 255, 0.1); /* ============================================ * Z-INDEX SCALE * ============================================ */ --z-content: 10; /* floating elements within content */ --z-sidebar: 40; /* sidebar */ --z-modal: 50; /* modal overlays */ --z-modal-above: 60; /* stacked modals (on top of another modal) */ --z-toast: 200; /* alert toasts, notifications */ } /* ============================================ * BASE STYLES * ============================================ */ body { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: var(--gray-900); background-color: var(--gray-50); } /* SVG safety net — prevent unsized SVGs from expanding to fill viewport */ svg:not([width]):not([height]):not([class*="w-"]):not([class*="h-"]) { max-width: 1.5rem; max-height: 1.5rem; } /* ============================================ * SIDEBAR LAYOUT — critical rules to prevent content shift on load * Full sidebar styles in /css/sidebar.css * * Pattern: html.has-sidebar is set synchronously via inline