/* ============================================================ СтройНаш ERP — design tokens Three themes switch via [data-theme] on . ============================================================ */ :root { /* type */ --font-ui: "Manrope", -apple-system, system-ui, sans-serif; --font-display: "Space Grotesk", var(--font-ui); --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace; /* radius */ --r-xs: 5px; --r-sm: 7px; --r: 10px; --r-lg: 14px; --r-xl: 20px; --r-full: 999px; /* spacing rhythm */ --gap: 16px; /* motion */ --ease: cubic-bezier(.22,.61,.36,1); --ease-out: cubic-bezier(.16,1,.3,1); --fast: .14s; --med: .26s; /* fixed semantic stage palette (same hue across themes) */ --stage-gray: #9aa1ab; --stage-yellow: #e6b008; --stage-orange: #f2731c; --stage-blue: #2a9bd4; --stage-green: #1f9d57; --pos: #1f9d57; /* приход / прибыль */ --neg: #e0543f; /* расход / убыток */ } /* ---------- LIGHT PRO (default) ---------- */ :root, [data-theme="light"] { --canvas: #eef0f3; --canvas-2: #e7eaee; --surface: #ffffff; --surface-2: #f8f9fb; --surface-3: #f1f3f6; --border: #e3e6ea; --border-2: #d3d8de; --text: #14171c; --text-2: #565d68; --text-3: #8c939e; --text-inv: #ffffff; --accent: #0b63f6; --accent-2: #0a55d4; --accent-soft: #e7effe; --accent-text: #0b54d0; --ring: color-mix(in oklch, var(--accent) 40%, transparent); --shadow-sm: 0 1px 2px rgba(20,25,35,.06), 0 1px 3px rgba(20,25,35,.05); --shadow: 0 4px 16px -4px rgba(20,25,35,.12), 0 2px 6px -2px rgba(20,25,35,.07); --shadow-lg: 0 24px 60px -16px rgba(15,22,40,.30), 0 8px 24px -8px rgba(15,22,40,.16); --sidebar-bg: #14171c; --sidebar-text: #c4cbd5; --sidebar-text-2: #7e8794; --sidebar-active: #ffffff; --sidebar-hover: rgba(255,255,255,.07); --sidebar-active-bg: rgba(255,255,255,.10); color-scheme: light; } /* ---------- DARK PREMIUM ---------- */ [data-theme="dark"] { --canvas: #0d0f12; --canvas-2: #101317; --surface: #16191f; --surface-2: #1b1f26; --surface-3: #21262e; --border: #272d36; --border-2: #333a45; --text: #eef1f5; --text-2: #9aa2ad; --text-3: #6b7480; --text-inv: #0d0f12; --accent: #5b94ff; --accent-2: #4d8dff; --accent-soft: #18233a; --accent-text: #93b7ff; --ring: color-mix(in oklch, var(--accent) 50%, transparent); --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 8px 24px -6px rgba(0,0,0,.55); --shadow-lg: 0 30px 70px -18px rgba(0,0,0,.75); --sidebar-bg: #090a0c; --sidebar-text: #b3bbc6; --sidebar-text-2: #6b7480; --sidebar-active: #ffffff; --sidebar-hover: rgba(255,255,255,.06); --sidebar-active-bg: rgba(91,148,255,.16); color-scheme: dark; } /* ---------- INDUSTRIAL (concrete + orange) ---------- */ [data-theme="industrial"] { --canvas: #e4e1da; --canvas-2: #dcd8cf; --surface: #faf9f6; --surface-2: #f1efe9; --surface-3: #e9e6de; --border: #d4cfc4; --border-2: #c0bbae; --text: #1c1a16; --text-2: #5a564d; --text-3: #8b867a; --text-inv: #ffffff; --accent: #ec5b13; --accent-2: #d44e0c; --accent-soft: #fbe7da; --accent-text: #c2480b; --ring: color-mix(in oklch, var(--accent) 40%, transparent); --shadow-sm: 0 1px 2px rgba(40,30,15,.10); --shadow: 0 4px 16px -4px rgba(40,30,15,.16); --shadow-lg: 0 24px 60px -16px rgba(40,30,15,.32); --sidebar-bg: #1c1a16; --sidebar-text: #c9c3b6; --sidebar-text-2: #837d6f; --sidebar-active: #ffffff; --sidebar-hover: rgba(255,255,255,.06); --sidebar-active-bg: rgba(236,91,19,.18); color-scheme: light; } /* ============================================================ */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } body { font-family: var(--font-ui); background: var(--canvas); color: var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "tnum" 0; } #root { height: 100%; } ::selection { background: var(--accent); color: #fff; } /* scrollbars — тонкие, появляются только при наведении (без бесполезных «культяшек») */ * { scrollbar-width: thin; scrollbar-color: transparent transparent; } *:hover { scrollbar-color: var(--border-2) transparent; } *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: transparent; border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; transition: background .15s; } *:hover::-webkit-scrollbar-thumb { background: var(--border-2); background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background: var(--text-3); background-clip: padding-box; } .tnum { font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums; } .mono { font-family: var(--font-mono); } .display { font-family: var(--font-display); } /* utility animations */ @keyframes fadeUp { from { transform: translateY(9px); } to { transform: none; } } @keyframes fadeIn { from { opacity: .6; transform: translateY(3px); } to { opacity: 1; transform: none; } } @keyframes popIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes pulseDot { 0%,100% { opacity: 1; } 50% { opacity: .35; } } @keyframes growBar { from { transform: scaleY(0); } to { transform: scaleY(1); } } .fade-up { animation: fadeUp var(--med) var(--ease-out); } .fade-in { animation: fadeIn var(--med) var(--ease); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }