/* Auth design tokens — «Финансовый терминал» * * Светлая и тёмная темы через light-dark(): первое значение — светлое, второе — тёмное. * Какое из них взять, решает color-scheme на , поэтому режим * «system» работает без JS. Строка со светлым значением перед каждым light-dark() — * фолбэк для браузеров старше Chrome 123 / Safari 17.5 / Firefox 120. */ /* Режим темы. data-theme проставляет сервер из cookie (см. core/context_processors.py) */ :root { color-scheme: light dark; } /* system — следуем за ОС */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } :root { /* Surface */ --bg: #FAFAF9; --bg: light-dark(#FAFAF9, #12110F); --surface: #FFFFFF; --surface: light-dark(#FFFFFF, #1A1917); --border: #E5E3DF; --border: light-dark(#E5E3DF, #2A2825); --border-strong: #C8C5C0; --border-strong: light-dark(#C8C5C0, #3D3A36); /* Text */ --text: #1A1A1A; --text: light-dark(#1A1A1A, #EDEAE4); --text-muted: #706D68; --text-muted: light-dark(#706D68, #A09B93); --text-subtle: #9C9892; --text-subtle: light-dark(#9C9892, #6E6A64); /* Amber accent (Bloomberg-style) */ --amber: #B8790F; --amber: light-dark(#B8790F, #E7B24A); --amber-fill: #E7B24A; /* Текст на янтарной заливке. Заливка светлая в обеих темах, поэтому текст всегда тёмный — иначе в тёмной теме он утонет в янтаре. */ --on-amber: #1A1A1A; --amber-hover: #A67620; --amber-hover: light-dark(#A67620, #F3C468); --amber-bg: #FBF3E3; --amber-bg: light-dark(#FBF3E3, #2A2114); --amber-border: rgba(200, 146, 42, 0.35); --amber-border: light-dark(rgba(200, 146, 42, 0.35), rgba(231, 178, 74, 0.32)); /* Кольцо фокуса. В тёмной теме плотнее, иначе тонет в фоне */ --amber-ring: rgba(200, 146, 42, 0.12); --amber-ring: light-dark(rgba(200, 146, 42, 0.12), rgba(231, 178, 74, 0.24)); /* Status */ --red: #B91C1C; --red: light-dark(#B91C1C, #F87171); --red-bg: #FEF2F2; --red-bg: light-dark(#FEF2F2, #2A1717); --red-border: rgba(185, 28, 28, 0.25); --red-border: light-dark(rgba(185, 28, 28, 0.25), rgba(248, 113, 113, 0.3)); --green: #15803D; --green: light-dark(#15803D, #4ADE80); --green-bg: #F0FDF4; --green-bg: light-dark(#F0FDF4, #14251A); --blue: #1D4ED8; --blue: light-dark(#1D4ED8, #60A5FA); --blue-bg: #EFF6FF; --blue-bg: light-dark(#EFF6FF, #16202E); --warning-text: #92400E; --warning-text: light-dark(#92400E, #FBBF24); --warning-bg: #FFFBEB; --warning-bg: light-dark(#FFFBEB, #292013); /* Shadows — в тёмной теме плотнее, иначе их не видно на тёмном фоне */ --shadow-color: rgba(26, 26, 26, 0.1); --shadow-color: light-dark(rgba(26, 26, 26, 0.1), rgba(0, 0, 0, 0.55)); --shadow-sm: 0 1px 2px var(--shadow-color); --shadow-md: 0 4px 14px var(--shadow-color); --shadow-lg: 0 18px 38px var(--shadow-color); /* Typography */ --font-ui: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; --text-xs: 11px; --text-sm: 12px; --text-base: 14px; --text-md: 15px; --text-lg: 17px; --text-xl: 20px; --text-2xl: 26px; /* Radius — волосяные, без скруглений */ --r-sm: 3px; --r-md: 5px; --r-lg: 8px; /* Motion */ --dur: 150ms; --ease: cubic-bezier(0.2, 0, 0, 1); }