/* ============================================================
 * Vilkax · vlx-theme.css — /app appearance bridge (Dark · Light · Future)
 * ============================================================
 *
 * The /app shell styles (style.css + app/app.css) predate the unified
 * --vx-* role tokens and read their own brand variables (--bg-ink,
 * --text-strong, --border-subtle, …). This bridge re-points those variables
 * at the themed --vx-* roles from /vilkax-tokens.css whenever the user picks
 * a non-default appearance, so the whole shell shifts in lockstep with no
 * markup edits — the same inheritance trick the marketing surface uses.
 *
 * Dark stays untouched: it IS the shipped default, so `[data-theme]` absent
 * or "dark" renders exactly what production renders today (zero-regression).
 * Load order: after /vilkax-tokens.css (needs the roles) — the
 * `html[data-theme]` selectors out-specify the `:root` defaults regardless
 * of where style.css lands in the cascade.
 * ============================================================ */

html[data-theme="light"],
html[data-theme="future"] {
  --bg-ink:        var(--vx-bg);
  --bg-ink-deep:   var(--vx-void);
  --bg-absolute:   var(--vx-void);
  --bg-card:       var(--vx-surface-1);
  --bg-surface:    var(--vx-surface-2);

  --brand-primary:        var(--vx-accent);
  --brand-primary-hover:  var(--vx-accent-ink);
  --brand-primary-bright: var(--vx-accent-br);
  --brand-accent-soft:    var(--vx-accent-sf);
  --brand-accent-glow:    var(--vx-accent-glow);

  --text-strong:   var(--vx-text);
  --text-default:  var(--vx-text-muted);
  --text-muted:    var(--vx-text-muted);
  --text-dim:      var(--vx-text-dim);

  --border-subtle: var(--vx-line);
  --border-strong: var(--vx-line-2);
  --border-line:   var(--vx-line-2);
}

/* Light needs a couple of surface repaints where the shell hardcodes a dark
 * glass (translucent white reads invisible on white; the sticky header bakes
 * in a dark navy). Future keeps the dark glass — it's still a dark shell. */
html[data-theme="light"] .app-header {
  background: rgba(255, 255, 255, 0.85);
  border-bottom: 1px solid var(--vx-line);
}
html[data-theme="light"] .app-card {
  background: var(--vx-surface-1);
  box-shadow: var(--vx-shadow-1);
}