/* ============================================================
   LEGACY HARMONIZATION (global)
   Retheme the SHARED Memphis component classes to the studio
   grammar on every page — so interior pages (toolbox, courses, etc.)
   harmonize without per-template edits. The site is a single unified
   studio theme. The `memphis-*` colour aliases stay as a compatibility
   layer (same hex as the new tokens). See RELAUNCH_PLAN.md Phase 6.
   Loaded after custom.css so it wins over the Memphis definitions.
   ============================================================ */

/* Studio is clean — drop the polka-dot background site-wide. */
.memphis-dots { display: none !important; }

[data-theme="build"] .section-title,
[data-theme="home"] .section-title {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.02em;
}
/* Rainbow underline → a short, centered accent bar */
[data-theme="build"] .section-title::after,
[data-theme="home"] .section-title::after {
  background: var(--accent) !important;
  left: 50%;
  width: 2.5rem;
  height: 3px;
  transform: translateX(-50%);
  border-radius: var(--radius-pill);
}

/* Cards */
[data-theme="build"] .card-memphis,
[data-theme="home"] .card-memphis {
  background: var(--surface);
  border: 1px solid var(--line) !important;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
[data-theme="build"] .card-memphis:hover,
[data-theme="home"] .card-memphis:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow) !important;
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
}

/* Soft-shadow + border utilities */
[data-theme="build"] .shadow-memphis, [data-theme="home"] .shadow-memphis,
[data-theme="build"] .shadow-memphis-sm, [data-theme="home"] .shadow-memphis-sm { box-shadow: var(--shadow-sm) !important; }
[data-theme="build"] .border-memphis-black, [data-theme="home"] .border-memphis-black { border-color: var(--line); }

/* Badges → studio pills */
[data-theme="build"] .badge-memphis, [data-theme="home"] .badge-memphis {
  border: none !important;
  border-radius: var(--radius-pill);
  font-weight: 600;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: color-mix(in srgb, var(--accent) 72%, var(--ink));
}
[data-theme="build"] .badge-teal, [data-theme="home"] .badge-teal { background: color-mix(in srgb, var(--signal) 14%, transparent); color: color-mix(in srgb, var(--signal) 70%, var(--ink)); }
[data-theme="build"] .badge-purple, [data-theme="home"] .badge-purple { background: color-mix(in srgb, var(--accent-2) 14%, transparent); color: color-mix(in srgb, var(--accent-2) 72%, var(--ink)); }
[data-theme="build"] .badge-yellow, [data-theme="home"] .badge-yellow { background: color-mix(in srgb, var(--warn) 18%, transparent); color: color-mix(in srgb, var(--warn) 45%, var(--ink)); }

/* Buttons → studio */
[data-theme="build"] .btn-memphis, [data-theme="home"] .btn-memphis {
  border-radius: var(--radius-pill) !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  font-family: var(--font-body);
}
/* a11y: white on --accent (#6366f1) is 4.46:1 — just under WCAG AA. The strong
   accent (#4f46e5) passes; hover darkens further via color-mix. */
[data-theme="build"] .btn-teal, [data-theme="home"] .btn-teal,
[data-theme="build"] .btn-pink, [data-theme="home"] .btn-pink,
[data-theme="build"] .btn-coral, [data-theme="home"] .btn-coral,
[data-theme="build"] .btn-purple, [data-theme="home"] .btn-purple,
[data-theme="build"] .btn-yellow, [data-theme="home"] .btn-yellow { background: var(--accent-strong) !important; color: #fff !important; }
[data-theme="build"] .btn-teal:hover, [data-theme="home"] .btn-teal:hover,
[data-theme="build"] .btn-pink:hover, [data-theme="home"] .btn-pink:hover,
[data-theme="build"] .btn-coral:hover, [data-theme="home"] .btn-coral:hover,
[data-theme="build"] .btn-purple:hover, [data-theme="home"] .btn-purple:hover,
[data-theme="build"] .btn-yellow:hover, [data-theme="home"] .btn-yellow:hover { background: color-mix(in srgb, var(--accent-strong) 85%, black) !important; }
[data-theme="build"] .btn-outline, [data-theme="home"] .btn-outline { background: transparent !important; color: var(--ink) !important; border-color: var(--line) !important; }
[data-theme="build"] .btn-outline:hover, [data-theme="home"] .btn-outline:hover { border-color: var(--accent) !important; color: var(--accent) !important; }

/* Badge colour aliases not covered above → fall back to the accent tint */
[data-theme="build"] .badge-pink, [data-theme="home"] .badge-pink,
[data-theme="build"] .badge-coral, [data-theme="home"] .badge-coral {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: color-mix(in srgb, var(--accent) 72%, var(--ink));
}

/* Card accent stripe → a single accent bar (no Memphis rainbow) */
[data-theme="build"] .card-accent::before,
[data-theme="home"] .card-accent::before { background: var(--accent) !important; }
[data-theme="build"] .card-accent-teal::before, [data-theme="home"] .card-accent-teal::before { background: var(--signal) !important; }
[data-theme="build"] .card-accent-purple::before, [data-theme="home"] .card-accent-purple::before { background: var(--accent-2) !important; }
[data-theme="build"] .card-accent-yellow::before, [data-theme="home"] .card-accent-yellow::before { background: var(--warn) !important; }

/* Colour-shadow utilities → soft studio shadow */
[data-theme="build"] .shadow-memphis-pink, [data-theme="home"] .shadow-memphis-pink,
[data-theme="build"] .shadow-memphis-teal, [data-theme="home"] .shadow-memphis-teal,
[data-theme="build"] .shadow-memphis-purple, [data-theme="home"] .shadow-memphis-purple { box-shadow: var(--shadow-sm) !important; }

/* Inputs → studio field */
[data-theme="build"] .input-memphis, [data-theme="home"] .input-memphis {
  background: var(--surface);
  border: 1px solid var(--line) !important;
  border-radius: var(--radius);
  box-shadow: none !important;
  color: var(--ink);
}
[data-theme="build"] .input-memphis:focus, [data-theme="home"] .input-memphis:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent) !important;
}

/* Accordions → studio frame */
[data-theme="build"] .accordion-memphis, [data-theme="home"] .accordion-memphis {
  border: 1px solid var(--line) !important;
  border-radius: var(--radius);
}
[data-theme="build"] .accordion-header-memphis, [data-theme="home"] .accordion-header-memphis { background: var(--surface); }
[data-theme="build"] .accordion-header-memphis:hover, [data-theme="home"] .accordion-header-memphis:hover { background: var(--surface-2); }
[data-theme="build"] .accordion-content-memphis, [data-theme="home"] .accordion-content-memphis {
  background: var(--surface);
  border-top: 1px solid var(--line);
}

/* Avatars → studio ring */
[data-theme="build"] .avatar-memphis, [data-theme="home"] .avatar-memphis {
  background: var(--accent);
  border: 1px solid var(--line);
}