/* ==========================================================================
   Shared token-based overrides (main page and all variants).
   Replaces the hard-coded colours in css/styles.css with token-based ones,
   so each variant only sets tokens plus its own personality.
   ========================================================================== */

body {
  background-color: var(--bg);
  background-image: var(--page-bg, none);
  background-size: var(--page-bg-size, auto);
  background-attachment: var(--page-bg-attach, scroll);
}

::selection { background: var(--accent); color: var(--on-accent); }

.site-header {
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  border-bottom-color: var(--line-soft);
}
@media (max-width: 760px) {
  .nav { background: color-mix(in srgb, var(--bg) 97%, transparent); }
}

/* Logo colours follow the variant */
.logo text { fill: var(--logo-letter, var(--accent)); }
.logo-impact { stroke: var(--accent); }

.quote mark { background: linear-gradient(transparent 62%, color-mix(in srgb, var(--accent) 30%, transparent) 0); }
.quote-lg {
  background:
    radial-gradient(520px 260px at 0% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%),
    var(--panel);
}
.quote-lg .q-role { color: var(--accent); }

.contact-inner {
  background:
    radial-gradient(600px 300px at 100% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%),
    var(--panel);
}

.case {
  background: color-mix(in srgb, var(--text) 2.5%, transparent);
  border-block-color: var(--line-soft);
}

.bento-pattern { background-image: radial-gradient(circle at center, color-mix(in srgb, var(--text) 9%, transparent) 1px, transparent 1px); }
.bento-icon,
.bento-status,
.tags li { background: color-mix(in srgb, var(--text) 6%, transparent); }
.bento-item:hover .bento-icon { background: color-mix(in srgb, var(--accent) 15%, transparent); }
.bento-item:hover .bento-status { background: color-mix(in srgb, var(--text) 10%, transparent); }
.bento-item:hover,
.bento-item.is-active,
.feature:hover { border-color: color-mix(in srgb, var(--text) 20%, transparent); box-shadow: none; }

.work-list summary:hover { background: color-mix(in srgb, var(--text) 3%, transparent); }
.f-icon { background: color-mix(in srgb, var(--accent) 13%, transparent); }

.photo-fallback,
.portrait-fallback { -webkit-text-stroke-color: color-mix(in srgb, var(--text) 25%, transparent); }

/* ---------- Variant switcher (preview only) ---------- */

.variant-switch {
  position: fixed; left: 50%; bottom: 14px; z-index: 90;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 0.25rem;
  padding: 0.3rem;
  border-radius: 999px;
  background: #111;
  color: #f5f5f5;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.5);
  font: 500 0.8rem/1 ui-sans-serif, system-ui, sans-serif;
}
.variant-switch a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; min-height: 36px;
  padding: 0 0.7rem;
  border-radius: 999px;
  color: inherit; text-decoration: none;
}
.variant-switch a:hover { background: #2a2a2a; }
.variant-switch a[aria-current="page"] { background: #f5f5f5; color: #111; }
.variant-switch .vs-name { padding: 0 0.6rem 0 0.8rem; white-space: nowrap; }
@media (max-width: 480px) { .variant-switch .vs-name { display: none; } }