/*
 * Kezdőlap — light theme refinements (vanilla prototype only).
 *
 * Applies only while the home screen is shown in the light theme (<html data-theme="light">).
 * The dark theme and all other screens are untouched. Layout, spacing and typography are unchanged:
 * only colours, borders and hover/focus states are refined.
 *
 * The page background is the shared light-theme --color-bg (theme-light.css), the same on every screen.
 *
 * Contrast (WCAG AA), on white, the page (#f3f4f6) and the concert panel (#e3f1ef):
 *   text ≥ 10.7:1 · muted ≥ 6.4:1 · subtle and accent text ≥ 5:1 · white on primary ≥ 6:1
 *   control borders ≥ 3:1
 */

/* Home palette: slate text, deeper teal, warm-grey lines */
:root[data-theme='light'] .home {
  --home-concert-bg: #e3f1ef;

  --color-text: #25343b;
  --color-text-muted: #46555c;
  --color-text-subtle: #56656b;

  --color-surface-1: #ffffff;
  --color-surface-2: #f7f8f7;
  --color-surface-3: #e9ecea;

  --color-border: #d5dbd8;
  --color-border-strong: #c3cbc7;
  --color-border-control: #7a8682;

  --color-accent: #176e65;
  --color-accent-hover: #125a53;
  --color-accent-active: #0f4b45;
  --color-accent-soft: rgb(23 110 101 / 8%);
  --color-accent-line: rgb(23 110 101 / 32%);

  --home-card-shadow: 0 1px 2px rgb(37 52 59 / 4%);
  --home-card-shadow-hover: 0 1px 2px rgb(37 52 59 / 5%), 0 6px 16px -6px rgb(37 52 59 / 12%);

  color: var(--color-text);
}

/* ---------- Active concert — the focal point ---------- */

:root[data-theme='light'] .home .concert-panel:not(.concert-panel--empty) {
  background: var(--home-concert-bg);
  border-color: #a9cdc4;
}

/* Quiet halo around the live status dot */
:root[data-theme='light'] .home .concert-panel__status:not(.concert-panel__status--idle) .concert-panel__status-dot {
  box-shadow: 0 0 0 3px rgb(23 110 101 / 16%);
}

/* Secondary action on the tinted panel: teal-tinted hover instead of grey */
:root[data-theme='light'] .home .concert-panel .btn--ghost {
  color: var(--color-text-muted);
}

:root[data-theme='light'] .home .concert-panel .btn--ghost:hover {
  background: rgb(23 110 101 / 9%);
  color: var(--color-text);
}

/* Inner ring matches the tinted panel, so the focus ring sits cleanly on it */
:root[data-theme='light'] .home .concert-panel:not(.concert-panel--empty) .btn:focus-visible {
  box-shadow: 0 0 0 2px var(--home-concert-bg), 0 0 0 4px var(--color-accent);
}

/* No active concert: keep the dashed outline, slightly firmer on the warm grey */
:root[data-theme='light'] .home .concert-panel--empty {
  border-color: var(--color-border-strong);
}

/* ---------- Navigation cards ---------- */

:root[data-theme='light'] .home .nav-card {
  background: var(--color-surface-1);
  border-color: var(--color-border);
  box-shadow: var(--home-card-shadow);
  transition:
    border-color var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}

/* Shared boxed-icon treatment (--color-icon-box-* in theme-light.css), same as Hogyan működik? */
:root[data-theme='light'] .home .nav-card__icon {
  background: var(--color-icon-box-bg);
  border-color: var(--color-icon-box-border);
  color: var(--color-icon-box-fg);
  transition:
    background-color var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard);
}

/* Hover: card stays white; a teal-tinted edge and a soft lift */
:root[data-theme='light'] .home .nav-card:hover {
  background: var(--color-surface-1);
  border-color: var(--color-accent-line);
  box-shadow: var(--home-card-shadow-hover);
}

:root[data-theme='light'] .home .nav-card:hover .nav-card__icon,
:root[data-theme='light'] .home .nav-card:focus-visible .nav-card__icon {
  background: var(--color-accent-soft);
  border-color: var(--color-icon-box-border-hover);
}

/* Slightly heavier stroke; dots with their own stroke width keep it */
:root[data-theme='light'] .home .nav-card__icon svg {
  stroke-width: var(--icon-box-stroke);
}

/* Keyboard focus: the standard focus ring, kept when the card is also hovered */
:root[data-theme='light'] .home .nav-card:focus-visible,
:root[data-theme='light'] .home .nav-card:focus-visible:hover {
  border-color: var(--color-accent);
  box-shadow: var(--focus-ring);
}