/* Reveo's design system, copied token for token. Lifted verbatim from reveo-suhbat/public/app.css, which took it from ai-manager-srvr/web/owner-react/src/styles/{kit,dark}.css. It is a COPY and not a variation on purpose: this is another Reveo product, and somebody moving between call.reveo.uz and diktofon.reveo.uz should not feel they changed vendor. When kit.css moves, THIS FILE is what gets re-synced. Do not add tokens here. Product-specific values belong in app.css, where a future re-sync will not silently overwrite them. Dark is `data-theme` on , keyed on `reveo_theme` in localStorage so the choice made in the Reveo workspace carries here. This product only READS it; there is no switch. */ :root { color-scheme: light; /* ---- surfaces ---- */ --bg:#F4F6F8; --surface:#FFFFFF; --surface-2:#FAFBFC; --surface-hover:#F6F8F9; --line:#E9EDF0; --line-2:#DEE4E8; --line-strong:#CDD5DA; /* ---- brand ---- */ --brand:#07B17F; --brand-ink:#05926A; --brand-deep:#04654B; --brand-soft:#E7F7F0; --brand-soft-2:#D5F0E4; /* Foreground on a --brand fill. Brand green is dark enough in both themes that this stays white either way; naming it stops the bare #fff literal spreading to every new filled button. */ --on-brand:#FFFFFF; /* ---- ink ---- */ --ink:#16221D; --ink-2:#566159; --ink-3:#85928A; --ink-4:#A9B3AC; /* ---- channel colours ---- Suhbat has no Telegram/WhatsApp/Instagram surface yet. They are carried anyway because a partial copy is how two palettes quietly drift apart. */ --tg:#27A7E7; --tg-soft:#E4F3FC; --wa:#22C55E; --wa-soft:#E4F8EC; --ig:#E1306C; --ig-soft:#FCE7EF; /* ---- status ---- */ --blue:#3B82F6; --blue-soft:#E8F0FE; --amber:#E59312; --amber-soft:#FCF1DF; --green:#0EA371; --green-soft:#E5F6EF; --red:#E5484D; --red-soft:#FCEAEA; /* --red is tuned for fills and reads at 3.4:1 on a card, under the 4.5:1 a label needs. Text takes --red-ink instead. */ --red-ink:#B42318; --violet:#7C5CFC; --violet-soft:#EFEBFE; /* ---- shape ---- */ --radius:20px; --radius-sm:14px; --radius-xs:12px; --pill:999px; --shadow-xs:0 1px 2px rgba(16,24,40,.05); --shadow-sm:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.04); --shadow:0 2px 6px -2px rgba(16,24,40,.08),0 4px 14px -6px rgba(16,24,40,.08); --shadow-lg:0 16px 40px -16px rgba(16,24,40,.22),0 4px 12px -6px rgba(16,24,40,.10); --shadow-pop:0 18px 50px -12px rgba(16,24,40,.26); --ease:cubic-bezier(.22,1,.36,1); /* ---- type ---- The same two families owner-react loads: Space Grotesk carries headings and the brand, Manrope carries everything else. Mono is the system stack, as it is there — no third webfont, and every platform's own mono is the one its readers parse fastest. --sans/--mono remain as aliases so the rules further down this file keep resolving. */ --font-d:"Space Grotesk",system-ui,sans-serif; --font-b:"Manrope",system-ui,sans-serif; --font-m:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace; --sans:var(--font-b); --mono:var(--font-m); /* 266px is kit.css's --sidebar-w, 72px its --topbar-h. Suhbat has no topbar, but the brand row is that height so the two products line up at the fold. */ --rail:266px; --brandbar:72px; /* One type scale, used everywhere. The jump from --t-lede to --t-body is deliberately large: the summary sentence is the page, the rest is support. Every size below is kit.css's own value for the same job, so the two products set the same thing at the same size: --t-h1 .tb-title h1 21px the page title --t-h2 .card-head h3 16.5px a card or section heading --t-small .card-head .cs 12.5px a heading's supporting line --t-eyebrow .sb-sectlabel 11px an uppercase micro-label */ --t-lede: clamp(19px, 1.15vw + 13px, 26px); --t-h1: 21px; --t-h2: 16.5px; --t-body: 14.5px; --t-small: 12.5px; --t-eyebrow: 11px; } :root[data-theme='dark'] { color-scheme: dark; --bg:#0E1512; --surface:#161E1A; --surface-2:#131A16; --surface-hover:#1C2620; --line:#243029; --line-2:#2C3A31; --line-strong:#38473D; --brand:#15C68F; --brand-ink:#2FD7A2; --brand-deep:#6FE9C2; --brand-soft:#14271F; --brand-soft-2:#18342A; --ink:#E8EFEA; --ink-2:#AEB8B1; --ink-3:#7E8A82; --ink-4:#5C665F; --tg:#3BB4F0; --tg-soft:#142430; --wa:#2FCB6A; --wa-soft:#122A1B; --ig:#EE4F84; --ig-soft:#2C1620; --blue:#5B9BFF; --blue-soft:#16243C; --amber:#F0A93A; --amber-soft:#2E2210; --green:#1BB47E; --green-soft:#122A20; --red:#F0666B; --red-soft:#2E1517; /* On the dark card --red already clears 4.5:1, so the text grade matches it. */ --red-ink:#F0666B; --violet:#9A82FF; --violet-soft:#20193C; --shadow-xs:0 1px 2px rgba(0,0,0,.3); --shadow-sm:0 1px 2px rgba(0,0,0,.3),0 1px 3px rgba(0,0,0,.25); --shadow:0 2px 6px -2px rgba(0,0,0,.4),0 4px 14px -6px rgba(0,0,0,.45); --shadow-lg:0 16px 40px -16px rgba(0,0,0,.6),0 4px 12px -6px rgba(0,0,0,.5); --shadow-pop:0 18px 50px -12px rgba(0,0,0,.7); }