/* * 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 cream paper (icon --icon-cream family, not cool slate) */ --bg-primary: #f3efe6; /* Nav / install-splash — readable forest green (not kelly; not near-black). */ --bg-secondary: #124631; /* Soft recessed panels — warm, not green wash and not Tailwind slate */ --bg-tertiary: #e8e0d4; --bg-tertiary-rgb: 232, 224, 212; --bg-surface: #fbf8f3; /* Raised panels / toolbars: cream elevated (brand stays in nav + primary actions) */ --bg-elevated: #f4efe6; /* Type-in fields — warm slip, one step brighter than --bg-surface (not printer-white) */ --bg-input: #fefcf8; --bg-hover: #ebe4d8; /* * Table / roster section row headers (riy, hurtok, proba groups). * Warm bark on paper — not accent-green/blue, which washed out on cream. */ --table-group-row-bg: color-mix(in srgb, var(--bg-tertiary) 72%, var(--icon-bark) 28%); --table-group-row-bg-hover: color-mix(in srgb, var(--bg-tertiary) 58%, var(--icon-bark) 42%); /* * Workspace entity bands — warm 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: #e8e0d4; --workspace-head-border: #ddd4c6; --workspace-sub-nav-bg: #eee8dc; --workspace-sub-nav-border: #ddd4c6; --text-primary: #1c1914; --text-secondary: #4a443a; --text-tertiary: #6b6358; --text-inverse: #f5ece0; /* 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: #ddd4c6; --border-secondary: #cfc4b2; --border-hover: #b8ab96; --border-subtle: var(--border-primary); --list-row-hover-bg: #ebe4d8; --list-row-active-bg: #e0d6c8; --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); /* Quiet bark-tinted shadows (prefer border for list frames) */ --shadow-key: 92, 64, 33; --shadow-sm: 0 1px 2px rgba(var(--shadow-key), 0.04); --shadow-md: 0 2px 6px -1px rgba(var(--shadow-key), 0.06); --shadow-lg: 0 8px 18px -4px rgba(var(--shadow-key), 0.08); --shadow-xl: 0 16px 24px -6px rgba(var(--shadow-key), 0.1); --shadow-card: 0 1px 1px rgba(var(--shadow-key), 0.04); --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: #5c4021; --alert-info-fg: #244a37; /* In-page nudges (confirm email, review inbox, setup) — paper strip, even hairline */ --nudge-bg: var(--bg-surface); --nudge-border: var(--border-primary); --nudge-tint: color-mix(in srgb, var(--icon-gold) 8%, var(--bg-surface)); --nudge-info-tint: color-mix(in srgb, var(--accent-primary) 6%, var(--bg-surface)); /* Page fabric (body): soft cream wash — brand stays in chrome, not the canvas. */ --body-pattern: linear-gradient(180deg, rgba(251, 248, 243, 0.55) 0%, transparent 52%), radial-gradient(ellipse 100% 52% at 50% -8%, rgba(92, 64, 33, 0.03), 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 cream + border (brand via content, not colored bands) */ --card-chrome-bg: #f4efe6; --card-chrome-border: #ddd4c6; --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.25rem; --radius-md: 0.25rem; --radius-lg: 0.5rem; --radius-xl: 0.5rem; /* Controls vs panels — two radii only (4px / 8px) */ --radius-button: 0.25rem; --radius-panel: 0.5rem; --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 page-title display face */ --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; --font-display: "Posvidka Serif", "Noto Serif", Georgia, "Times New Roman", serif; --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: #f3efe6; --meta-theme-color-dark: #161410; /* 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: #161410; /* Darker than page so chrome reads recessed — still visibly green, not black */ --bg-secondary: #0f241b; /* Recessed panels — warm ink, not Tailwind slate */ --bg-tertiary: #1a1714; --bg-tertiary-rgb: 26, 23, 20; --bg-surface: #221f1a; --bg-elevated: #2a261f; --bg-input: #322c24; --bg-hover: #2a261f; --table-group-row-bg: color-mix(in srgb, var(--bg-elevated) 78%, var(--icon-bark) 22%); --table-group-row-bg-hover: color-mix(in srgb, var(--bg-elevated) 64%, var(--icon-bark) 36%); /* Workspace bands — warm ink value steps; green reserved for accents */ --workspace-head-bg: #1a1714; --workspace-head-border: #3a342c; --workspace-sub-nav-bg: #141210; --workspace-sub-nav-border: #2a261f; --text-primary: #f5ece0; --text-secondary: #d4cbbd; --text-tertiary: #a89f91; --text-inverse: #f5ece0; /* 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: #3a342c; --border-secondary: #4a4338; --border-hover: #6b6358; --border-subtle: var(--border-primary); --list-row-hover-bg: #2a261f; --list-row-active-bg: #3a342c; --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 2px 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: #e9a84a; --alert-info-fg: #9fd4b5; --nudge-tint: color-mix(in srgb, var(--icon-gold) 12%, var(--bg-surface)); --nudge-info-tint: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-surface)); --body-pattern: linear-gradient(180deg, rgba(22, 20, 16, 0.4) 0%, transparent 48%), radial-gradient(ellipse 96% 48% at 50% 0%, rgba(92, 64, 33, 0.12), 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: #221f1a; --card-chrome-border: #3a342c; --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: #161410; --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; }