/* compound.care gateway homepage — light theme overrides (pairs with theme.css toggle). */
[data-theme="light"] {
  --bg: #f8fafc;
  --bg2: #f1f5f9;
  --panel: rgba(15, 23, 42, 0.03);
  --panel-line: rgba(15, 23, 42, 0.08);
  --text: #0f172a;
  --dim: #475569;
  --faint: #64748b;
  --nav-bg: rgba(248, 250, 252, 0.92);
  --grid-line: rgba(15, 23, 42, 0.06);
  --eyebrow-text: #1d4ed8;
  --eyebrow-bg: rgba(37, 99, 235, 0.08);
  --eyebrow-border: rgba(37, 99, 235, 0.22);
  --tile-hover-bg: rgba(37, 99, 235, 0.05);
  --tile-hover-border: rgba(37, 99, 235, 0.35);
  --ico-stroke: #2563eb;
  --ico-stroke-patient: #059669;
  --go-hover: #2563eb;
  --btn-ghost-bg: rgba(15, 23, 42, 0.03);
}

[data-theme="light"] .bg-fx:before {
  opacity: 0.22;
  background: radial-gradient(circle, #93c5fd 0%, transparent 70%);
}
[data-theme="light"] .bg-fx:after {
  opacity: 0.18;
  background: radial-gradient(circle, #67e8f9 0%, transparent 70%);
}
[data-theme="light"] .grid-mask {
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
}
[data-theme="light"] .eyebrow {
  color: var(--eyebrow-text);
  background: var(--eyebrow-bg);
  border-color: var(--eyebrow-border);
}
[data-theme="light"] .tile:hover {
  background: var(--tile-hover-bg);
  border-color: var(--tile-hover-border);
}
[data-theme="light"] .tile .ico svg {
  stroke: var(--ico-stroke);
}
[data-theme="light"] .tile:hover .go {
  color: var(--go-hover);
}
[data-theme="light"] .tile.patient {
  background: linear-gradient(160deg, rgba(5, 150, 105, 0.06), var(--panel));
  border-color: rgba(5, 150, 105, 0.2);
}
[data-theme="light"] .tile.patient .ico svg {
  stroke: var(--ico-stroke-patient);
}
[data-theme="light"] .btn.ghost {
  background: var(--btn-ghost-bg);
}