/* * Design tokens — light / dark (data-theme on ). * * Roles (keep these separate or the UI collapses into green-on-green): * Chrome — deep forest nav (--bg-secondary); brand field matches the app icon. * Surfaces — neutral paper / slate ladder by lightness (page → head → sub-rail → cards). * Accents — forest for links/CTAs; icon-mark red (--accent-mark) for workspace tab underlines. * Icon mark colors (--icon-*) feed mark accents; see docs/design_palette.md. */ :root { color-scheme: light; /* Page canvas — warm paper (neutral; was mint-tinted #f6faf7) */ --bg-primary: #f6f7f5; /* Nav / install-splash — readable forest green (not kelly; not near-black). */ --bg-secondary: #124631; /* Soft recessed panels — neutral, not green wash */ --bg-tertiary: #e9ece8; --bg-surface: #ffffff; /* Raised panels / toolbars: cool neutral (brand stays in nav + primary actions) */ --bg-elevated: #f8fafc; --bg-hover: #f1f5f9; /* * Workspace entity bands — neutral value steps under the forest chrome. * Head sits one step darker than the page; sub-rail sits between head and canvas. * Active tab underline uses --accent-mark (berry red from the icon), not forest green. */ --workspace-head-bg: #e4e7e4; --workspace-head-border: #d5dad6; --workspace-sub-nav-bg: #ecefec; --workspace-sub-nav-border: #dce1dd; --text-primary: #0f1f14; --text-secondary: #3d4f42; --text-tertiary: #5c6f62; --text-inverse: #f8fafc; /* Primary actions & links — dusty forest (lower saturation than #15803d / “kelly” primary greens) */ --accent-primary: #2d5c44; --accent-primary-hover: #244a37; --accent-primary-rgb: 45, 92, 68; --accent-secondary: #4f8f6c; /* * Solid .btn-primary (page CTAs) — brighter than --accent-primary so actions pop on the canvas and * read clearly apart from dark --bg-secondary navbar chrome (same hue family, higher lightness). */ --btn-primary-bg: #3f9164; --btn-primary-hover: #347a52; --btn-primary-rgb: 63, 145, 100; /* .btn-outline-secondary hover — brand wash instead of flat gray (--text-tertiary fill). */ --btn-outline-secondary-hover-bg: rgba(var(--accent-primary-rgb), 0.1); --btn-outline-secondary-hover-border: rgba(var(--accent-primary-rgb), 0.42); --btn-outline-secondary-hover-color: var(--accent-primary); /* Small “add / increment” actions (extra row, add to list) — tinted chip, not a full CTA */ --btn-add-bg: rgba(var(--accent-primary-rgb), 0.09); --btn-add-border: rgba(var(--accent-primary-rgb), 0.34); --btn-add-color: var(--accent-primary); --btn-add-hover-bg: rgba(var(--accent-primary-rgb), 0.16); --btn-add-hover-border: rgba(var(--accent-primary-rgb), 0.48); --btn-add-hover-color: var(--accent-primary-hover); --btn-add-active-bg: rgba(var(--accent-primary-rgb), 0.22); --accent-cyan: #0e7490; --accent-pink: #be185d; --accent-gold: #d97706; --accent-gold-hover: #b45309; --accent-purple: #6d28d9; /* * Icon mark palette — figures from public/icon-512.png (not the green field). * Future use: illustrations, empty states, playful accents. See docs/design_palette.md. */ --icon-forest: #728552; --icon-forest-dark: #3d5639; --icon-red: #c92626; --icon-red-deep: #9e1f1f; --icon-gold: #e9a84a; --icon-bark: #8b653b; --icon-bark-deep: #5c4021; --icon-cream: #f5ece0; /* Mark accent — berry red from the icon; workspace tab underlines / selected marks */ --accent-mark: var(--icon-red); --accent-mark-hover: var(--icon-red-deep); --accent-mark-rgb: 201, 38, 38; --success: #2a7d4f; --success-hover: #244a37; --success-rgb: 42, 125, 79; --warning: #ca8a04; --warning-rgb: 202, 138, 4; --error: #dc2626; --error-rgb: 220, 38, 38; --info: #0369a1; --info-rgb: 3, 105, 161; --nav-fixed-height: 72px; --nav-sticky-top: calc(var(--nav-fixed-height) + env(safe-area-inset-top, 0px)); /* Clearance reserved for fixed bottom tab bar in standalone PWA (see navbar.css / responsive.css). */ --bottom-nav-clearance: 70px; /* Text on dark green chrome (nav, sidebar) */ --nav-fg: #ecfdf5; --nav-fg-emphasis: #ffffff; --nav-fg-muted: rgba(236, 253, 245, 0.78); --nav-chrome-active-bg: color-mix(in srgb, #ffffff 12%, #124631); --nav-chrome-active-ring: rgba(187, 247, 208, 0.45); --nav-chrome-item-fg: var(--nav-fg); --nav-border: rgba(255, 255, 255, 0.16); --nav-toggler-bg: rgba(255, 255, 255, 0.1); --nav-toggler-hover-bg: rgba(255, 255, 255, 0.16); --nav-toggler-border: rgba(255, 255, 255, 0.22); --nav-toggler-hover-border: rgba(255, 255, 255, 0.3); --nav-toggler-open-bg: #0f3626; --nav-toggler-open-hover-bg: #2d5c44; --nav-toggler-open-border: rgba(187, 247, 208, 0.45); --nav-item-hover-bg: rgba(255, 255, 255, 0.1); --border-primary: #e2e8f0; --border-secondary: #cbd5e1; --border-hover: #94a3b8; --list-row-hover-bg: #f1f5f9; --list-row-active-bg: #e2e8f0; --list-row-link-hover-fg: #356b52; --list-row-link-active-fg: #1e3a2e; --list-row-hover-fg: var(--text-primary); --list-row-active-fg: var(--text-primary); --link-content-color: var(--accent-primary); --link-content-hover-color: var(--list-row-link-hover-fg); /* Footer — same canvas as main content; border separates from page (no mint strip under links) */ --footer-bg: var(--bg-primary); --footer-fg: var(--text-secondary); --footer-link-fg: var(--accent-primary); --footer-link-hover-fg: var(--list-row-link-hover-fg); --footer-border: var(--border-primary); /* Soft neutral shadows (avoid green-tinted structural chrome) */ --shadow-key: 71, 85, 105; --shadow-sm: 0 1px 2px rgba(var(--shadow-key), 0.05); --shadow-md: 0 4px 8px -1px rgba(var(--shadow-key), 0.07); --shadow-lg: 0 10px 22px -4px rgba(var(--shadow-key), 0.09); --shadow-xl: 0 20px 28px -6px rgba(var(--shadow-key), 0.11); --shadow-card: 0 1px 2px rgba(var(--shadow-key), 0.06), 0 1px 3px rgba(var(--shadow-key), 0.08); --shadow-navbar: 0 4px 18px rgba(0, 0, 0, 0.12); /* Menus / popovers — a bit more lift than cards so they read above fixed chrome */ --shadow-dropdown: 0 0 0 1px rgba(var(--shadow-key), 0.04), 0 8px 28px -4px rgba(var(--shadow-key), 0.14), 0 18px 48px -12px rgba(var(--shadow-key), 0.1); --shadow-bottom-nav: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 -4px 20px rgba(0, 0, 0, 0.14); --backdrop-scrim: rgba(15, 31, 20, 0.45); --danger-fg: #b91c1c; --danger-fg-strong: #7f1d1d; --danger-bg-hover: rgba(220, 38, 38, 0.1); --alert-success-fg: #1e3a2e; --alert-danger-fg: #991b1b; --alert-warning-fg: #713f12; --alert-info-fg: #0c4a6e; /* Page fabric (body): soft neutral wash — brand stays in chrome, not the canvas. */ --body-pattern: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, transparent 52%), radial-gradient(ellipse 100% 52% at 50% -8%, rgba(71, 85, 105, 0.035), transparent 58%); /* * Plast ulad badge + header tints (КУПО-style colours per public ulad pages, e.g. if.plast.org.ua/…/upn|upyu|usp): * УПН — жовтий; УПЮ — малиновий; УСП — зелена; УПС — бронза (УПС colour less often published — bronze family). */ --ulad-upn-badge-bg: #fef9c3; --ulad-upn-badge-fg: #713f12; --ulad-upn-badge-border: #ca8a04; --ulad-upyu-badge-bg: #fce7f3; --ulad-upyu-badge-fg: #9d174d; --ulad-upyu-badge-border: #db2777; --ulad-usp-badge-bg: #d1fae5; --ulad-usp-badge-fg: #065f46; --ulad-usp-badge-border: #059669; --ulad-ups-badge-bg: #fef3c7; --ulad-ups-badge-fg: #78350f; --ulad-ups-badge-border: #d97706; /* Card header/footer — flat surface + border (brand via content, not colored bands) */ --card-chrome-bg: #f8fafc; --card-chrome-border: #e2e8f0; --card-chrome-inset-header: none; --card-chrome-inset-footer: none; --ulad-header-tint-upn: color-mix(in srgb, #ca8a04 11%, var(--card-chrome-bg)); --ulad-header-border-upn: color-mix(in srgb, #ca8a04 28%, var(--border-primary)); --ulad-header-tint-upyu: color-mix(in srgb, #db2777 9%, var(--card-chrome-bg)); --ulad-header-border-upyu: color-mix(in srgb, #db2777 26%, var(--border-primary)); --ulad-header-tint-usp: color-mix(in srgb, #059669 10%, var(--card-chrome-bg)); --ulad-header-border-usp: color-mix(in srgb, #059669 28%, var(--border-primary)); --ulad-header-tint-ups: color-mix(in srgb, #d97706 10%, var(--card-chrome-bg)); --ulad-header-border-ups: color-mix(in srgb, #d97706 28%, var(--border-primary)); /* * Browse-only locked workspace preview (overlay + status ribbon). * Defaults track semantic surfaces/borders; change here when refreshing the global UI so previews stay consistent. */ --browse-locked-scrim-bg: color-mix(in srgb, var(--bg-surface) 72%, transparent); --browse-locked-stripe: color-mix(in srgb, var(--border-primary) 28%, transparent); --browse-locked-inset-ring: color-mix(in srgb, var(--border-primary) 45%, transparent); --browse-locked-backdrop-blur: blur(4px) saturate(0.94); --browse-locked-ribbon-bg: color-mix(in srgb, var(--bg-elevated) 92%, transparent); --browse-locked-ribbon-border: color-mix(in srgb, var(--border-primary) 55%, transparent); --browse-locked-ribbon-fg: var(--text-secondary); --browse-locked-ribbon-shadow: var(--shadow-sm); --browse-locked-icon-fg: var(--text-tertiary); --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; /* Controls vs panels — keep Bootstrap + custom buttons aligned */ --radius-button: var(--radius-md); --radius-panel: var(--radius-xl); --transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 180ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 250ms cubic-bezier(0.4, 0, 0.2, 1); --font-2xs: 0.7rem; --font-xs: 0.75rem; --font-sm: 0.8rem; --font-base: 0.875rem; --font-md: 1rem; --font-lg: 1.05rem; --font-xl: 1.125rem; /* App UI density (lists, forms, toolbars) — separate from marketing/article headings in typography.css */ --font-ui-page-title: clamp(1.375rem, 2.8vw, 1.75rem); --font-ui-section: clamp(1.125rem, 2.2vw, 1.375rem); --font-ui-body: var(--font-md); --font-ui-sm: var(--font-sm); --font-ui-label: 0.9375rem; --catalog-vmilist-bg: rgba(217, 119, 6, 0.14); --catalog-vmilist-fg: #92400e; --catalog-vmilist-border: rgba(217, 119, 6, 0.38); --catalog-proba-bg: rgba(var(--accent-primary-rgb), 0.12); --catalog-proba-fg: #1e3a2e; --catalog-proba-border: rgba(var(--accent-primary-rgb), 0.32); --catalog-track-bg: var(--bg-elevated); --catalog-track-fg: var(--text-secondary); --catalog-track-border: var(--border-secondary); --catalog-branch-bg: var(--bg-surface); --catalog-branch-fg: var(--text-secondary); --catalog-branch-border: var(--border-secondary); --catalog-count-bg: rgba(var(--accent-primary-rgb), 0.12); --catalog-count-fg: #1e3a2e; --catalog-count-border: rgba(var(--accent-primary-rgb), 0.34); --catalog-filtered-pill-bg: rgba(var(--accent-primary-rgb), 0.08); --catalog-filtered-pill-fg: var(--text-primary); --catalog-filtered-pill-border: rgba(var(--accent-primary-rgb), 0.2); --catalog-category-bg: rgba(14, 116, 144, 0.1); --catalog-category-fg: #0e7490; --catalog-category-border: rgba(14, 116, 144, 0.26); --catalog-goal-bg: var(--bg-surface); --catalog-goal-fg: var(--text-secondary); --catalog-goal-border: var(--border-secondary); --catalog-req-code-bg: var(--bg-elevated); --catalog-req-code-fg: var(--text-tertiary); --catalog-req-code-border: var(--border-primary); --catalog-details-bg: var(--bg-tertiary); --catalog-details-border: var(--border-primary); --catalog-details-summary-fg: var(--text-primary); --catalog-req-group-bg: rgba(15, 31, 20, 0.04); --catalog-req-group-border: var(--border-secondary); --catalog-hint-bg: rgba(217, 119, 6, 0.1); --catalog-hint-fg: #9a3412; --catalog-hint-border: rgba(217, 119, 6, 0.3); /* PWA manifest — brand green (ApplicationHelper::THEME_COLOR_*_HEX) */ --theme-color-light: #124631; --theme-color-dark: #0f172a; /* Page canvas tokens (META_THEME_COLOR_* in Ruby); `` uses nav chrome THEME_COLOR_* / --bg-secondary */ --meta-theme-color-light: #f6faf7; --meta-theme-color-dark: #020617; /* Unsaved grid checkbox checkmark (data-URI can’t use var(--accent-primary) directly). */ --form-check-unsaved-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%232d5c44' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); /* Outbox-queued checkmark (warning amber). */ --form-check-outbox-pending-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ca8a04' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); } html[data-theme="dark"] { color-scheme: dark; --bg-primary: #020617; /* Darker than page slate so chrome reads recessed — still visibly green, not black */ --bg-secondary: #0f241b; /* Recessed panels — slate, not green-tinted */ --bg-tertiary: #0f172a; --bg-surface: #1e293b; --bg-elevated: #334155; --bg-hover: #334155; /* Workspace bands — slate value steps; green reserved for accents */ --workspace-head-bg: #111827; --workspace-head-border: #1f2937; --workspace-sub-nav-bg: #0b1220; --workspace-sub-nav-border: #1e293b; --text-primary: #f1f5f9; --text-secondary: #cbd5e1; --text-tertiary: #94a3b8; --text-inverse: #f8fafc; /* Links / accents — mid forest (not green-400 neon); solid CTAs share light’s dusty fill */ --accent-primary: #3d9b6a; --accent-primary-hover: #34855a; --accent-primary-rgb: 61, 155, 106; --accent-secondary: #5aab7e; --form-check-unsaved-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%233d9b6a' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); --form-check-outbox-pending-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fbbf24' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); /* Solid CTAs: same forest as light — readable on slate without mint glare */ --btn-primary-bg: #3f9164; --btn-primary-hover: #347a52; --btn-primary-rgb: 63, 145, 100; --btn-outline-secondary-hover-bg: rgba(var(--accent-primary-rgb), 0.22); --btn-outline-secondary-hover-border: rgba(var(--accent-primary-rgb), 0.55); --btn-outline-secondary-hover-color: #9fd4b5; --btn-add-bg: rgba(var(--accent-primary-rgb), 0.14); --btn-add-border: rgba(var(--accent-primary-rgb), 0.42); --btn-add-color: #86c4a0; --btn-add-hover-bg: rgba(var(--accent-primary-rgb), 0.22); --btn-add-hover-border: rgba(var(--accent-primary-rgb), 0.55); --btn-add-hover-color: #9fd4b5; --btn-add-active-bg: rgba(var(--accent-primary-rgb), 0.28); --accent-cyan: #22d3ee; --accent-pink: #f472b6; --accent-gold: #fbbf24; --accent-gold-hover: #f59e0b; --accent-purple: #c084fc; /* Mark accent — slightly brighter berry for dark surfaces */ --accent-mark: #e85d5d; --accent-mark-hover: #c92626; --accent-mark-rgb: 232, 93, 93; --success: #3f9164; --success-hover: #347a52; --success-rgb: 63, 145, 100; --warning: #fbbf24; --warning-rgb: 251, 191, 36; --error: #f87171; --error-rgb: 248, 113, 113; --info: #38bdf8; --info-rgb: 56, 189, 248; --nav-fg: #ecfdf5; --nav-fg-emphasis: #ffffff; --nav-fg-muted: rgba(236, 253, 245, 0.76); --nav-chrome-active-bg: color-mix(in srgb, var(--accent-primary) 22%, var(--bg-secondary)); --nav-chrome-active-ring: rgba(var(--accent-primary-rgb), 0.45); --nav-border: rgba(255, 255, 255, 0.12); --nav-toggler-bg: rgba(255, 255, 255, 0.08); --nav-toggler-hover-bg: rgba(255, 255, 255, 0.14); --nav-toggler-border: rgba(255, 255, 255, 0.18); --nav-toggler-hover-border: rgba(255, 255, 255, 0.26); --nav-toggler-open-bg: #143828; --nav-toggler-open-hover-bg: #1f4032; --nav-toggler-open-border: rgba(var(--accent-primary-rgb), 0.42); --nav-item-hover-bg: rgba(255, 255, 255, 0.08); --border-primary: #334155; --border-secondary: #475569; --border-hover: #64748b; --list-row-hover-bg: #1e293b; --list-row-active-bg: #334155; --list-row-link-hover-fg: #9fd4b5; --list-row-link-active-fg: #b8e0c8; --footer-bg: var(--bg-primary); --footer-fg: var(--text-secondary); --footer-link-fg: var(--accent-primary); --footer-link-hover-fg: var(--list-row-link-hover-fg); --footer-border: var(--border-primary); --shadow-key: 0, 0, 0; --shadow-sm: 0 1px 2px rgba(var(--shadow-key), 0.25); --shadow-md: 0 4px 8px -1px rgba(var(--shadow-key), 0.35); --shadow-lg: 0 10px 22px -4px rgba(var(--shadow-key), 0.45); --shadow-xl: 0 20px 28px -6px rgba(var(--shadow-key), 0.5); --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 1px 3px rgba(0, 0, 0, 0.35), 0 12px 40px rgba(0, 0, 0, 0.35); --shadow-navbar: 0 4px 24px rgba(0, 0, 0, 0.45); --shadow-dropdown: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 12px 40px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.35); --shadow-bottom-nav: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 -4px 24px rgba(0, 0, 0, 0.35); --backdrop-scrim: rgba(0, 0, 0, 0.55); --danger-fg: #fca5a5; --danger-fg-strong: #fecaca; --danger-bg-hover: rgba(248, 113, 113, 0.15); --alert-success-fg: #9fd4b5; --alert-danger-fg: #fecaca; --alert-warning-fg: #fde68a; --alert-info-fg: #bae6fd; --body-pattern: linear-gradient(180deg, rgba(15, 23, 42, 0.4) 0%, transparent 48%), radial-gradient(ellipse 96% 48% at 50% 0%, rgba(61, 155, 106, 0.045), transparent 62%); --ulad-upn-badge-bg: rgba(202, 138, 4, 0.22); --ulad-upn-badge-fg: #fde047; --ulad-upn-badge-border: rgba(250, 204, 21, 0.45); --ulad-upyu-badge-bg: rgba(219, 39, 119, 0.22); --ulad-upyu-badge-fg: #fbcfe8; --ulad-upyu-badge-border: rgba(244, 114, 182, 0.45); --ulad-usp-badge-bg: rgba(5, 150, 105, 0.25); --ulad-usp-badge-fg: #9fd4b5; --ulad-usp-badge-border: rgba(52, 211, 153, 0.45); --ulad-ups-badge-bg: rgba(217, 119, 6, 0.22); --ulad-ups-badge-fg: #fde68a; --ulad-ups-badge-border: rgba(251, 191, 36, 0.45); --card-chrome-bg: #1e293b; --card-chrome-border: #334155; --card-chrome-inset-header: none; --card-chrome-inset-footer: none; --ulad-header-tint-upn: color-mix(in srgb, #fbbf24 14%, var(--card-chrome-bg)); --ulad-header-border-upn: color-mix(in srgb, #fbbf24 32%, var(--border-primary)); --ulad-header-tint-upyu: color-mix(in srgb, #ec4899 12%, var(--card-chrome-bg)); --ulad-header-border-upyu: color-mix(in srgb, #ec4899 30%, var(--border-primary)); --ulad-header-tint-usp: color-mix(in srgb, #34d399 13%, var(--card-chrome-bg)); --ulad-header-border-usp: color-mix(in srgb, #34d399 30%, var(--border-primary)); --ulad-header-tint-ups: color-mix(in srgb, #fbbf24 11%, var(--card-chrome-bg)); --ulad-header-border-ups: color-mix(in srgb, #fbbf24 28%, var(--border-primary)); --browse-locked-scrim-bg: color-mix(in srgb, var(--bg-primary) 78%, transparent); --browse-locked-stripe: color-mix(in srgb, var(--border-secondary) 22%, transparent); --browse-locked-inset-ring: color-mix(in srgb, var(--border-secondary) 38%, transparent); --browse-locked-ribbon-bg: color-mix(in srgb, var(--card-chrome-bg) 88%, transparent); --browse-locked-ribbon-border: color-mix(in srgb, var(--border-secondary) 55%, transparent); --browse-locked-ribbon-fg: var(--text-tertiary); --browse-locked-icon-fg: var(--text-secondary); --catalog-vmilist-bg: rgba(251, 191, 36, 0.12); --catalog-vmilist-fg: #fde68a; --catalog-vmilist-border: rgba(251, 191, 36, 0.35); --catalog-proba-bg: rgba(var(--accent-primary-rgb), 0.12); --catalog-proba-fg: #b8e0c8; --catalog-proba-border: rgba(var(--accent-primary-rgb), 0.35); --catalog-count-bg: rgba(var(--accent-primary-rgb), 0.14); --catalog-count-fg: #ecfdf5; --catalog-count-border: rgba(var(--accent-primary-rgb), 0.38); --catalog-filtered-pill-bg: rgba(var(--accent-primary-rgb), 0.1); --catalog-filtered-pill-border: rgba(var(--accent-primary-rgb), 0.26); --catalog-category-bg: rgba(34, 211, 238, 0.1); --catalog-category-fg: #a5f3fc; --catalog-category-border: rgba(34, 211, 238, 0.28); --catalog-req-code-bg: #0f172a; --catalog-req-group-bg: rgba(241, 245, 249, 0.04); --catalog-hint-bg: rgba(251, 191, 36, 0.1); --catalog-hint-fg: #fde68a; --catalog-hint-border: rgba(251, 191, 36, 0.28); /* Same as ApplicationHelper::THEME_COLOR_DARK_HEX (PWA manifest when app is dark) */ --theme-color-dark: #0f241b; }