foodlinkk-command-center/cockpit/static/css/flk-themes.css

/* Foodlinkk UI themes — colorful cyan/blue family, mid-dark, vivid accents */
/* Applied via <html data-theme="..."> (localStorage key: flk-theme) */

html[data-theme="ocean"] {
  --bg-root: #07131f;
  --bg-surface: #0c1c2e;
  --bg-elevated: #123049;
  --bg-hover: #183a58;
  --border-subtle: #1f4b6e;
  --border-strong: #2d6a96;
  --text-primary: #eef9ff;
  --text-secondary: #b6e3f7;
  --text-muted: #7eb6d4;
  --text-body: #d5effc;
  --accent-cyan: #22d3ee;
  --accent-cyan-dim: rgba(34, 211, 238, 0.22);
  --accent-purple: #67e8f9;
  --accent-purple-dim: rgba(103, 232, 249, 0.18);
  --accent-amber: #38bdf8;
  --accent-amber-dim: rgba(56, 189, 248, 0.2);
  --accent-green: #2dd4bf;
  --accent-green-dim: rgba(45, 212, 191, 0.2);
  --accent-red: #fb7185;
  --accent-red-dim: rgba(251, 113, 133, 0.18);
  --shadow-panel: 0 8px 32px rgba(8, 47, 73, 0.55);
  --flk-theme-glow: rgba(34, 211, 238, 0.35);
}

html[data-theme="aurora"] {
  --bg-root: #0a1020;
  --bg-surface: #121a32;
  --bg-elevated: #1a2550;
  --bg-hover: #243266;
  --border-subtle: #3347a0;
  --border-strong: #4f6dff;
  --text-primary: #f0f4ff;
  --text-secondary: #c7d2fe;
  --text-muted: #9db0f5;
  --text-body: #dde4ff;
  --accent-cyan: #22d3ee;
  --accent-cyan-dim: rgba(34, 211, 238, 0.2);
  --accent-purple: #a78bfa;
  --accent-purple-dim: rgba(167, 139, 250, 0.22);
  --accent-amber: #818cf8;
  --accent-amber-dim: rgba(129, 140, 248, 0.22);
  --accent-green: #34d399;
  --accent-green-dim: rgba(52, 211, 153, 0.2);
  --accent-red: #f472b6;
  --accent-red-dim: rgba(244, 114, 182, 0.2);
  --shadow-panel: 0 8px 32px rgba(49, 46, 129, 0.5);
  --flk-theme-glow: rgba(167, 139, 250, 0.4);
}

html[data-theme="neon"] {
  --bg-root: #050b14;
  --bg-surface: #0a1628;
  --bg-elevated: #10243f;
  --bg-hover: #163255;
  --border-subtle: #1a4d6e;
  --border-strong: #06b6d4;
  --text-primary: #ecfeff;
  --text-secondary: #a5f3fc;
  --text-muted: #67e8f9;
  --text-body: #cffafe;
  --accent-cyan: #06b6d4;
  --accent-cyan-dim: rgba(6, 182, 212, 0.28);
  --accent-purple: #e879f9;
  --accent-purple-dim: rgba(232, 121, 249, 0.2);
  --accent-amber: #22d3ee;
  --accent-amber-dim: rgba(34, 211, 238, 0.25);
  --accent-green: #4ade80;
  --accent-green-dim: rgba(74, 222, 128, 0.22);
  --accent-red: #ff6bcb;
  --accent-red-dim: rgba(255, 107, 203, 0.22);
  --shadow-panel: 0 0 40px rgba(6, 182, 212, 0.18);
  --flk-theme-glow: rgba(6, 182, 212, 0.45);
}

html[data-theme="glacier"] {
  --bg-root: #0b1522;
  --bg-surface: #122033;
  --bg-elevated: #1a2f4a;
  --bg-hover: #223b5a;
  --border-subtle: #2a5078;
  --border-strong: #3b82f6;
  --text-primary: #f0f9ff;
  --text-secondary: #bae6fd;
  --text-muted: #7dd3fc;
  --text-body: #e0f2fe;
  --accent-cyan: #38bdf8;
  --accent-cyan-dim: rgba(56, 189, 248, 0.22);
  --accent-purple: #60a5fa;
  --accent-purple-dim: rgba(96, 165, 250, 0.2);
  --accent-amber: #7dd3fc;
  --accent-amber-dim: rgba(125, 211, 252, 0.2);
  --accent-green: #2dd4bf;
  --accent-green-dim: rgba(45, 212, 191, 0.2);
  --accent-red: #fb7185;
  --accent-red-dim: rgba(251, 113, 133, 0.18);
  --shadow-panel: 0 8px 28px rgba(30, 64, 175, 0.35);
  --flk-theme-glow: rgba(56, 189, 248, 0.35);
}

html[data-theme="cobalt"] {
  --bg-root: #08101c;
  --bg-surface: #0f1a2e;
  --bg-elevated: #172642;
  --bg-hover: #1f3256;
  --border-subtle: #274878;
  --border-strong: #3b82f6;
  --text-primary: #eff6ff;
  --text-secondary: #bfdbfe;
  --text-muted: #93c5fd;
  --text-body: #dbeafe;
  --accent-cyan: #22d3ee;
  --accent-cyan-dim: rgba(34, 211, 238, 0.2);
  --accent-purple: #818cf8;
  --accent-purple-dim: rgba(129, 140, 248, 0.22);
  --accent-amber: #fbbf24;
  --accent-amber-dim: rgba(251, 191, 36, 0.18);
  --accent-green: #34d399;
  --accent-green-dim: rgba(52, 211, 153, 0.2);
  --accent-red: #f87171;
  --accent-red-dim: rgba(248, 113, 113, 0.18);
  --shadow-panel: 0 10px 36px rgba(37, 99, 235, 0.28);
  --flk-theme-glow: rgba(59, 130, 246, 0.4);
}

/* Soft global accents when a theme is active */
html[data-theme] body {
  background:
    radial-gradient(1200px 600px at 10% -10%, color-mix(in srgb, var(--accent-cyan) 18%, transparent), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, color-mix(in srgb, var(--accent-purple) 14%, transparent), transparent 55%),
    var(--bg-root);
}
html[data-theme] .sidebar,
html[data-theme] .app-sidebar {
  border-right-color: color-mix(in srgb, var(--accent-cyan) 35%, var(--border-subtle));
  box-shadow: inset -1px 0 0 color-mix(in srgb, var(--accent-cyan) 15%, transparent);
}
html[data-theme] .btn-pulse,
html[data-theme] .btn-primary {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-cyan) 40%, transparent),
              0 8px 24px color-mix(in srgb, var(--accent-cyan) 22%, transparent);
}
html[data-theme] .panel,
html[data-theme] .hm-neo {
  border-color: color-mix(in srgb, var(--accent-cyan) 22%, var(--border-subtle));
}

/* Settings theme cards */
.flk-theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.85rem;
  margin-top: 1rem;
}
.flk-theme-card {
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 0.85rem;
  background: var(--bg-elevated);
  cursor: pointer;
  text-align: left;
  color: inherit;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.flk-theme-card:hover { transform: translateY(-2px); border-color: var(--accent-cyan); }
.flk-theme-card.is-active {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 0 2px var(--accent-cyan-dim), 0 12px 28px rgba(0,0,0,.35);
}
.flk-theme-swatch {
  height: 52px;
  border-radius: 10px;
  margin-bottom: 0.65rem;
  border: 1px solid rgba(255,255,255,0.12);
}
.flk-theme-card strong { display: block; margin-bottom: 0.15rem; }
.flk-theme-card small { opacity: 0.75; line-height: 1.35; display: block; }