/* * Design tokens — light / dark (data-theme on ). * Light: neutral surfaces + hairline borders; muted cool forest for nav chrome + links (less saturated than typical “brand” green). * Dark: slate surfaces with mint / green accents. */ :root { color-scheme: light; /* Page canvas — warm off-white with a whisper of green */ --bg-primary: #f6faf7; /* Nav / install-splash — readable forest green (not kelly; not near-black). */ --bg-secondary: #1c5139; --bg-tertiary: #ecfdf3; --bg-surface: #ffffff; /* Raised panels / toolbars: neutral (brand stays in nav + primary actions) */ --bg-elevated: #f8fafc; --bg-hover: #f1f5f9; --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; --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)); /* * Mobile (` uses nav chrome THEME_COLOR_* / --bg-secondary */ --meta-theme-color-light: #f6faf7; --meta-theme-color-dark: #020617; } 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; --bg-tertiary: #152620; --bg-surface: #1e293b; --bg-elevated: #334155; --bg-hover: #334155; --text-primary: #f1f5f9; --text-secondary: #cbd5e1; --text-tertiary: #94a3b8; --text-inverse: #f8fafc; /* Slightly softer than pure Tailwind green-500 so dark UI feels less “neon” */ --accent-primary: #34a368; --accent-primary-hover: #2d8f58; --accent-primary-rgb: 52, 163, 104; --accent-secondary: #5fd098; /* Solid CTAs: lift above dark nav strip (--bg-secondary) and body text links */ --btn-primary-bg: #4ade80; --btn-primary-hover: #34a368; --btn-primary-rgb: 74, 222, 128; --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: #bbf7d0; --btn-add-bg: rgba(var(--accent-primary-rgb), 0.14); --btn-add-border: rgba(var(--accent-primary-rgb), 0.42); --btn-add-color: #86efac; --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: #bbf7d0; --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; --success: #4ade80; --success-hover: #34a368; --success-rgb: 74, 222, 128; --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: #bbf7d0; --list-row-link-active-fg: #d1fae5; --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: #bbf7d0; --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(52, 163, 104, 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: #bbf7d0; --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: #d1fae5; --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; } @media (max-width: 991.98px) { :root { --nav-fixed-height: 56px; --bottom-nav-clearance: 5rem; } }