/* Корпоративні кольори ecdoc. * * У розмітці пишемо РОЛІ (`bg-card`, `text-muted-foreground`, `border-border`), * а не відтінки (`bg-gray-50`): зміна фірмового кольору — правка цього файла. * Світла тема за замовчуванням, темна — коли на стоїть class="dark". * * Синій #003399 — основний, жовтий #ffcc00 — акцент. */ :root { --background: #f4f6f9; --foreground: #172033; --card: #ffffff; --card-foreground: #172033; --popover: #ffffff; --popover-foreground: #172033; --primary: #003399; --primary-foreground: #ffffff; --secondary: #e9eef8; --secondary-foreground: #003399; --accent: #ffcc00; --accent-foreground: #172033; --muted: #e9edf3; --muted-foreground: #475569; --destructive: #b42318; --destructive-foreground: #ffffff; --border: #bdc7d5; --input: #8290a5; --ring: #003399; --chart-1: #003399; --chart-2: #946600; --chart-3: #006f91; --chart-4: #5b21b6; --chart-5: #475569; --sidebar: #e9eef5; --sidebar-foreground: #172033; --sidebar-primary: #003399; --sidebar-primary-foreground: #ffffff; --sidebar-accent: #dce6fa; --sidebar-accent-foreground: #003399; --sidebar-border: #bdc7d5; --sidebar-ring: #003399; /* Стани. Кожен має три значення: насичений фон, текст на ньому і мʼякий тінт для плашок. Службовий фіолетовий — це chart-4 світлої теми. */ --success: #027a48; --success-foreground: #ffffff; --success-soft: #ecfdf3; --warning: #b54708; --warning-foreground: #ffffff; --warning-soft: #fffaeb; --info: #175cd3; --info-foreground: #ffffff; --info-soft: #eff8ff; --destructive-soft: #fef3f2; --utility: #5b21b6; --utility-foreground: #ffffff; --utility-soft: #f4f0ff; } .dark { --background: #020617; --foreground: #f8fafc; --card: #0f172a; --card-foreground: #f8fafc; --popover: #1e293b; --popover-foreground: #f8fafc; --primary: #99b8ff; --primary-foreground: #0f172a; --secondary: #0f172a; --secondary-foreground: #dcebfa; --accent: #ffcc00; --accent-foreground: #0f172a; --muted: #1e293b; --muted-foreground: #94a3b8; --destructive: #f04438; --destructive-foreground: #ffffff; --border: #334155; --input: #475569; --ring: #99b8ff; --chart-1: #99b8ff; --chart-2: #ffcc00; --chart-3: #7dd3fc; --chart-4: #12b76a; --chart-5: #f79009; --sidebar: #0f172a; --sidebar-foreground: #f8fafc; --sidebar-primary: #99b8ff; --sidebar-primary-foreground: #0f172a; --sidebar-accent: #124781; --sidebar-accent-foreground: #dcebfa; --sidebar-border: #334155; --sidebar-ring: #99b8ff; /* Стани в темній темі: насичені світлішають, тінти стають глибокими, щоб плашка не світилась білим на темному тлі. */ --success: #12b76a; --success-foreground: #0f172a; --success-soft: #052e21; --warning: #f79009; --warning-foreground: #0f172a; --warning-soft: #3a2503; --info: #84adff; --info-foreground: #0f172a; --info-soft: #0b1f3f; --destructive-soft: #3b1614; --utility: #c4b5fd; --utility-foreground: #0f172a; --utility-soft: #241a4a; } /* Сторінка фарбується одразу, ще до Tailwind: інакше при завантаженні блимає біле тло навіть у темній темі. */ html { background-color: var(--background); color: var(--foreground); } /* Перемикач теми памʼятає вибір людини в localStorage; скрипт у base.html ставить class="dark" до першого малювання, тому блимання немає. */