/* ============================================================================
 * Synodos-MED+ · Soul layer — three distinct, calm identities (Στάδιο 3)
 * ----------------------------------------------------------------------------
 * Ψυχολογική Υποστήριξη → lav   ·   Λόγοι Ελπίδας → honey   ·   Ανάπαυλα → breath
 *
 * Loaded after css/home-calm.css. Pure re-skin — no layout/DOM changes. One
 * accent variable (--soul) drives each surface, so every space keeps its own
 * character within the palette. Scoped to the Home "Για εσένα" corner and to
 * the soul views via #app-content[data-view="…"] (set by app.js on load).
 * ============================================================================ */

/* ── Home «Για εσένα» corner — gateway cards to the three soul spaces ──────── */
.soul-psychology {
  --soul: var(--lav);
}
.soul-hope {
  --soul: var(--honey);
}
.soul-respite {
  --soul: var(--breath);
}

/* The base .self-care-card sets `border … !important`, so the accent must too. */
.self-care-actions .soul-card {
  border-top: 2px solid var(--soul, var(--teal)) !important;
}
.soul-card .self-care-card-label {
  color: var(--soul, var(--color-text-main));
}

/* ── Soul views — one accent colour per view ──────────────────────────────── */
#app-content[data-view="psychology"] {
  --soul: var(--lav);
}
#app-content[data-view="spiritual"] {
  --soul: var(--honey);
}
#app-content[data-view="game"] {
  --soul: var(--breath);
}

#app-content[data-view="psychology"] .view-header h2,
#app-content[data-view="spiritual"] .view-header h2,
#app-content[data-view="game"] .view-header h2 {
  color: var(--soul);
}

/* Card sub-headings pick up the space colour (safe: text only, no layout). */
#app-content[data-view="psychology"] .carousel-card h4,
#app-content[data-view="spiritual"] .carousel-card h4 {
  color: var(--soul);
}

/* ── Pillar-menu category cards — same identity as the soul spaces ──────────
   Styling moved out of the inline attributes in app.html into this layer.
   Inner icon-badge accents stay teal — that is the shared icon language of
   the whole grid, not a deviation. */
.category-card[data-view="psychology"] .card-icon {
  background-color: var(--lav-bg);
  color: var(--lav);
}
.category-card[data-view="spiritual"] .card-icon {
  background-color: var(--honey-bg);
  color: var(--honey);
}
.category-card[data-view="game"] .card-icon {
  background-color: var(--breath-bg);
  color: var(--breath);
}