/* ============================================================================ SKIN: MIAMI (vaporwave) — html[data-skin="miami"] ---------------------------------------------------------------------------- A tasteful vaporwave / sunset-gradient / neon complete look for the /app dashboard. DARK-first (engine default tone = dark, accent = plum). The vibe: a deep indigo/plum base + a soft sunset wash (hot-pink -> violet -> cyan) on the page bg, a faint perspective grid-horizon motif, dark translucent cards with a neon gradient edge + outer glow, gradient-text display headings in a retro-future face (Space Grotesk), and neon-magenta->cyan glow on the primary buttons / active nav / focus rings / progress fills. Body text stays light + AA (>=4.5:1) on the dark; the gradients are for surfaces/accents/headings, never behind body copy. ENGINE NOTE (the accent): theme.js sets --accent / --accent-deep / --accent-text / --accent-soft / --coral-tint / --coral-tint2 / --coral-line INLINE on (Miami's default accent = "plum", dark variant). Inline wins the cascade, so we do NOT fight the inline --accent*. Instead we push the HOTTER neon by redefining the dashboard-local --c-* aliases (--c-coral / --c-deep / --c-text / --c-tint / --c-tint2 / --c-line / --c-wash) directly on html[data-skin="miami"] — those are NOT set inline, so our literals win — and by restyling the accent-using chrome (buttons, glows, active states, bars, focus rings) with literal neon hues. --coral-wash is also free to override. AA: the neon-magenta TEXT token (--c-text #ff7fd0) is ~6.1:1 on the indigo card (#1a1230) and ~7:1 on the page; cyan text (#67e8f9) clears AA on dark; body ink (#eae6ff / #c5bce6) clears AA on every Miami surface. The neon button fill carries a WHITE label and a glow, not neon text on neon. Verified in the _skin_miami_qa harness across Home/Explore/Journeys/Settings at 1280 + 390. Scope rule: EVERY rule is under html[data-skin="miami"]. Light tone is supported via html[data-skin="miami"][data-theme="light"] (a lighter sunset variant) but the dark default is the optimized target. No emoji, no em dashes. ============================================================================ */ /* A retro-future geometric display face for headings (CSP allows fonts.googleapis.com). */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap'); /* ── NEON PALETTE (literals; the Miami signature) ──────────────────────────── magenta #ff5fa2 (hot pink) · #ff7fd0 (neon text, AA on dark) · violet #a78bfa · cyan #22d3ee / #67e8f9 (AA text). These drive the chrome below. */ html[data-skin="miami"] { /* ── SURFACES — deep indigo/plum base, dark translucent cards ────────────── */ --bg: rgba(26, 18, 48, 0.72); /* card surface — dark translucent (rgba(20,14,40,.7) family) */ --bg-2: #0f0a1e; /* page ground — deep indigo/plum (the sunset rides on top) */ --bg-3: #1c1338; /* recessed fill: tabs / pills / locked */ --card-2: rgba(34, 24, 60, 0.66); /* faint alt card surface */ --border: rgba(167, 139, 250, 0.26); /* hairline — faint violet */ --border-strong: rgba(255, 95, 162, 0.34); /* stronger hairline — magenta-leaning */ /* dark cover/tile fills — deep indigo so the neon covers read */ --cover-1: #2a1d52; --cover-2: #211641; --cover-3: #181030; /* ── INK RAMP — light + AA on the dark indigo ────────────────────────────── */ --ink: #efeaff; /* primary text/heading — near-white violet-white (12:1 on page) */ --ink-2: #cbc1ee; /* secondary text — soft lilac (7.4:1 on the card) */ --ink-3: #a99fce; /* tertiary / meta — muted lilac (4.7:1 on the card) */ --w-ink-4: #a99fce; /* faintest AA mono/meta — lift to clear 4.5:1 on the translucent card */ /* ── ACCENT FAMILY (the dashboard-local --c-* aliases — NOT inline, so these win; push a hotter NEON MAGENTA than the plum default) ──────────────── */ --c-coral: #ff5fa2; /* bars / borders / non-text accents — hot pink */ --c-deep: #ff4d97; /* "fill" hue (used behind a glow + white label) */ --c-text: #ff7fd0; /* small accent TEXT on the dark surface — AA (6.1:1) */ --accent-soft: #ffa8d6; /* soft accent on dark covers (not inline-locked) */ --c-tint: rgba(255, 95, 162, 0.16); /* faint neon fill: chips / banners / active pills */ --c-tint2: rgba(255, 95, 162, 0.24); --c-line: rgba(255, 95, 162, 0.42); /* neon hairline */ --c-wash: rgba(167, 139, 250, 0.12);/* hover / drag bed — violet wash */ /* the heatmap ramp follows the neon (sequential single-hue on dark) */ --hm-0: var(--bg-3); --hm-1: #7a4fb0; --hm-2: #ff5fa2; --hm-3: #ff7fd0; /* ── SHAPE — a touch rounder for the retro-future feel ────────────────────── */ --radius-xs: 9px; --radius-sm: 12px; --radius: 16px; --radius-lg: 20px; --radius-xl: 26px; /* ── ELEVATION — neon glow instead of cool drop shadow (SKIN HOOK) ────────── */ --shadow-1: 0 0 0 1px rgba(167,139,250,0.10), 0 2px 10px rgba(8,4,22,0.55); --shadow-2: 0 0 22px rgba(255,95,162,0.16), 0 10px 28px rgba(8,4,22,0.62); --shadow-3: 0 0 34px rgba(255,95,162,0.22), 0 24px 60px rgba(8,4,22,0.7); --shadow-coral: 0 0 20px rgba(255,77,151,0.5), 0 6px 18px rgba(255,77,151,0.28); --w-shadow: var(--shadow-1); --w-shadow-lift: var(--shadow-2); --card-shadow: 0 0 24px rgba(255,95,162,0.18), 0 8px 26px rgba(8,4,22,0.55); /* ── TYPE — retro-future display face for headings (SKIN HOOK) ────────────── */ --font-display: 'Space Grotesk', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* ── SKIN HOOK: the page background = sunset gradient + grid-horizon motif ─── */ /* Layered: (1) two soft large-radius radial suns (hot-pink top-left, cyan lower-right), (2) a faint perspective grid (repeating-linear gradients that fade toward a horizon line), (3) the deep indigo base. Ink stays AA because the suns are low-alpha and the body copy sits on dark translucent cards. */ --page-bg: radial-gradient(120% 95% at 12% -8%, rgba(255,95,162,0.26) 0%, rgba(255,95,162,0) 52%), radial-gradient(110% 90% at 92% 108%, rgba(34,211,238,0.20) 0%, rgba(34,211,238,0) 50%), radial-gradient(100% 80% at 50% 42%, rgba(139,92,246,0.16) 0%, rgba(139,92,246,0) 60%), #0f0a1e; } /* The page + shell: paint the sunset, then lay a faint perspective grid-horizon over it via a fixed pseudo-element so it tiles the whole viewport (and does not scroll out from under long content). */ html[data-skin="miami"] body { background: var(--page-bg); background-attachment: fixed; } html[data-skin="miami"] .app-shell { background: transparent; position: relative; } html[data-skin="miami"] body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; /* horizontal scanlines + perspective verticals, fading up toward a horizon ~58% */ background-image: repeating-linear-gradient(to right, rgba(167,139,250,0.10) 0 1px, transparent 1px 64px), repeating-linear-gradient(to bottom, rgba(34,211,238,0.07) 0 1px, transparent 1px 52px); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 40%, rgba(0,0,0,0.55) 62%, rgba(0,0,0,0.9) 100%); mask-image: linear-gradient(to bottom, transparent 0%, transparent 40%, rgba(0,0,0,0.55) 62%, rgba(0,0,0,0.9) 100%); } /* a single neon horizon line where the grid "lands" */ html[data-skin="miami"] body::after { content: ""; position: fixed; left: 0; right: 0; top: 58%; height: 1px; z-index: 0; pointer-events: none; background: linear-gradient(to right, transparent, rgba(255,95,162,0.5) 22%, rgba(34,211,238,0.5) 78%, transparent); box-shadow: 0 0 14px rgba(255,95,162,0.4); } /* keep the real content above the motif layers */ html[data-skin="miami"] .app-shell > * { position: relative; z-index: 1; } /* ── SHELL / NAV ──────────────────────────────────────────────────────────── */ html[data-skin="miami"] .app-sidebar { background: rgba(20, 14, 38, 0.66); border-right: 1px solid var(--border); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } html[data-skin="miami"] .app-main { color: var(--ink); } html[data-skin="miami"] .side-link { color: var(--ink-2); border-radius: 12px; } html[data-skin="miami"] .side-link:hover { background: var(--c-wash); color: var(--ink); } /* active nav: neon-magenta indicator + glow + a bright neon bar on the left edge */ html[data-skin="miami"] .side-link.current { background: var(--c-tint); color: #ffd9ee; position: relative; box-shadow: inset 0 0 0 1px var(--c-line); } html[data-skin="miami"] .side-link.current::before { content: ""; position: absolute; left: -1px; top: 7px; bottom: 7px; width: 3px; border-radius: 3px; background: linear-gradient(to bottom, #ff5fa2, #22d3ee); box-shadow: 0 0 10px rgba(255,95,162,0.7); } html[data-skin="miami"] .side-exit:hover { color: var(--c-text); } @media (max-width: 760px) { html[data-skin="miami"] .app-sidebar { background: rgba(15, 10, 30, 0.82); border-bottom: 1px solid var(--border); } } html[data-skin="miami"] .app-topbar { background: rgba(15, 10, 30, 0.6); border-bottom: 1px solid var(--border); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } /* ── HEADINGS — gradient text on the big h1 / eyebrows (AA fallback color) ──── */ html[data-skin="miami"] .dash-head h1, html[data-skin="miami"] .iax-head h1 { font-family: var(--font-display); letter-spacing: -0.02em; color: #ffd9ee; /* AA solid fallback if background-clip is unsupported */ background: linear-gradient(100deg, #ff8ad1 0%, #c8a6ff 48%, #6fe3f7 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } html[data-skin="miami"] .dash-eyebrow, html[data-skin="miami"] .card-eyebrow, html[data-skin="miami"] .hero-eyebrow { color: var(--c-text); letter-spacing: 0.16em; } html[data-skin="miami"] .jd-name, html[data-skin="miami"] .hero-title, html[data-skin="miami"] .iax-cover-title { font-family: var(--font-display); } /* ── CARDS — dark translucent + gradient/neon edge + soft outer glow ────────── */ html[data-skin="miami"] .card, html[data-skin="miami"] .iax-card, html[data-skin="miami"] .jrow, html[data-skin="miami"] .iax-bookrow { background: var(--bg); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-color: var(--border); box-shadow: var(--card-shadow); } /* the gradient neon EDGE — a 1px conic/linear border drawn as a top hairline + a faint full ring so the card reads as a lit pane (kept subtle, not screaming). */ html[data-skin="miami"] .card { position: relative; } html[data-skin="miami"] .card::after, html[data-skin="miami"] .iax-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1px; background: linear-gradient(135deg, rgba(255,95,162,0.5), rgba(139,92,246,0.18) 45%, rgba(34,211,238,0.5)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.55; } html[data-skin="miami"] .iax-card { position: relative; overflow: hidden; } html[data-skin="miami"] a.iax-card:hover, html[data-skin="miami"] a.jrow:hover { box-shadow: var(--shadow-2); border-color: var(--c-line); } /* the hero "Continue" rail -> a neon magenta->cyan gradient bar + glow */ html[data-skin="miami"] .hero-card { border-color: var(--c-line); } html[data-skin="miami"] .hero-card::before { background: linear-gradient(to bottom, #ff5fa2, #a78bfa 50%, #22d3ee); width: 4px; box-shadow: 0 0 12px rgba(255,95,162,0.6); } /* ── BUTTONS — neon-magenta fill, white label, magenta->cyan glow ──────────── */ html[data-skin="miami"] .btn-coral { background: linear-gradient(120deg, #ff4d97, #c44bd1 60%, #6d5cf0); color: #fff; border-color: rgba(255,95,162,0.6); box-shadow: 0 0 20px rgba(255,77,151,0.45), 0 6px 16px rgba(8,4,22,0.5); } html[data-skin="miami"] .btn-coral:hover { background: linear-gradient(120deg, #ff5fa2, #d05ce0 60%, #7a6bff); border-color: rgba(34,211,238,0.6); box-shadow: 0 0 26px rgba(34,211,238,0.4), 0 0 18px rgba(255,95,162,0.45), 0 8px 20px rgba(8,4,22,0.55); color: #fff; } html[data-skin="miami"] .btn-ghost-coral { background: rgba(255, 95, 162, 0.08); color: #ff9bd8; border-color: var(--c-line); box-shadow: none; } html[data-skin="miami"] .btn-ghost-coral:hover { background: rgba(255, 95, 162, 0.16); color: #ffb3e1; border-color: rgba(34,211,238,0.5); } /* ── PROGRESS / BARS — neon magenta->cyan fill + glow ──────────────────────── */ html[data-skin="miami"] .pbar, html[data-skin="miami"] .jbar { background: rgba(167,139,250,0.18); } html[data-skin="miami"] .pbar > i, html[data-skin="miami"] .jbar > i { background: linear-gradient(to right, #ff5fa2, #22d3ee); box-shadow: 0 0 10px rgba(255,95,162,0.55); } html[data-skin="miami"] .jpct { color: var(--c-text); } html[data-skin="miami"] .pbar-pct { color: var(--ink-2); } /* ── LADDER (journey/modules) ──────────────────────────────────────────────── */ html[data-skin="miami"] .journey::before { background: rgba(167,139,250,0.22); } html[data-skin="miami"] .journey-divider { border-bottom-color: var(--border); } html[data-skin="miami"] .jd-count { color: var(--ink-3); } html[data-skin="miami"] .jsep-num { background: linear-gradient(135deg, #ff4d97, #6d5cf0); color: #fff; box-shadow: 0 0 12px rgba(255,77,151,0.5); } html[data-skin="miami"] .jsep-label { color: var(--c-text); } html[data-skin="miami"] .jsep-rule, html[data-skin="miami"] .journey-divider { border-color: var(--border); } /* the cover number tiles: neon for current/completed, deep indigo otherwise */ html[data-skin="miami"] .jrow.is-completed .jcover { background: linear-gradient(135deg, #ff4d97, #a14bd1); } html[data-skin="miami"] .jrow.is-current .jcover { background: linear-gradient(135deg, #ff5fa2, #6d5cf0); } html[data-skin="miami"] .jrow.is-current .jcover::after { background: #22d3ee; box-shadow: 0 0 10px rgba(34,211,238,0.7); } html[data-skin="miami"] .jrow.is-available .jcover { background: var(--cover-1); } html[data-skin="miami"] .jrow.is-locked .jcover { background: var(--bg-3); } html[data-skin="miami"] .jrow.is-locked .jcover .jnum, html[data-skin="miami"] .jrow.is-locked .jcover svg { color: var(--ink-3); } html[data-skin="miami"] .jtitle { color: var(--ink); } html[data-skin="miami"] .jrow.is-locked .jtitle { color: var(--ink-3); } html[data-skin="miami"] .jstate.s-completed { color: var(--c-text); } html[data-skin="miami"] .jgo { color: var(--c-text); } /* ── DASHBOARD-VIEW TABS / PICKER ──────────────────────────────────────────── */ html[data-skin="miami"] .dv-tab { color: var(--ink-2); } html[data-skin="miami"] .dv-tab:hover { color: var(--ink); background: var(--c-wash); } html[data-skin="miami"] .dv-tab.is-on { color: #ffd9ee; background: var(--c-tint); border-color: var(--c-line); box-shadow: 0 0 12px rgba(255,95,162,0.25); } html[data-skin="miami"] .dv-pick-trigger { background: var(--bg); color: var(--ink); border-color: var(--border); } html[data-skin="miami"] .dv-pick-trigger:hover { border-color: var(--c-line); } html[data-skin="miami"] .dv-pick-menu { background: rgba(22, 15, 42, 0.96); border-color: var(--border); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--shadow-3); } html[data-skin="miami"] .dv-pick-row:hover { background: var(--c-wash); } html[data-skin="miami"] .dv-pick-row[aria-checked="true"] { background: var(--c-tint); color: #ffd9ee; } html[data-skin="miami"] .dv-pick-ck { color: var(--c-text); } /* ── PILLS / CHIPS / BANNERS ───────────────────────────────────────────────── */ html[data-skin="miami"] .jel { background: rgba(167,139,250,0.14); border-color: var(--border); color: var(--ink-2); } html[data-skin="miami"] .jel.coming { background: var(--bg-3); color: var(--ink-3); } html[data-skin="miami"] .id-role { background: var(--c-tint); color: #ffd9ee; border-color: var(--c-line); } html[data-skin="miami"] .ord-status.paid { background: var(--c-tint); color: #ffd9ee; } html[data-skin="miami"] .ord-status.pending { background: var(--c-tint2); color: #ffd9ee; } html[data-skin="miami"] .ord-status.refunded, html[data-skin="miami"] .ord-status.failed, html[data-skin="miami"] .ord-status.canceled { background: var(--bg-3); color: var(--ink-3); } html[data-skin="miami"] .banner-ok { background: var(--c-tint); border-color: var(--c-line); } html[data-skin="miami"] .banner-ok svg { color: var(--c-text); } /* ── EXPLORE (iax / xv) ────────────────────────────────────────────────────── */ html[data-skin="miami"] .iax-tab { color: var(--ink-3); } html[data-skin="miami"] .iax-tab:hover { color: var(--ink); } html[data-skin="miami"] .iax-tabs { border-bottom-color: var(--border); } html[data-skin="miami"] .iax-tab.on { color: var(--c-text); border-bottom-color: #ff5fa2; } html[data-skin="miami"] .iax-tab.on .iax-tab-n { color: #ffd9ee; background: var(--c-tint); border-color: var(--c-line); } html[data-skin="miami"] .iax-chip { background: var(--bg); color: var(--ink-2); border-color: var(--border); } html[data-skin="miami"] .iax-chip:hover { color: var(--c-text); border-color: var(--c-line); } html[data-skin="miami"] .iax-chip.on { background: var(--c-tint); color: #ffd9ee; border-color: var(--c-line); } html[data-skin="miami"] .iax-search { background: var(--bg); border-color: var(--border); } html[data-skin="miami"] .iax-search:focus-within { border-color: var(--c-line); box-shadow: 0 0 0 3px rgba(255,95,162,0.18); } html[data-skin="miami"] .iax-search input { color: var(--ink); } html[data-skin="miami"] .iax-blurb { color: var(--ink-2); } /* explore cover tiles -> neon-leaning gradients (kept dark enough that white text is AA) */ html[data-skin="miami"] .iax-cover.t-coral { background: linear-gradient(135deg, #c43b8f, #6d3cc0); color: #fff; } html[data-skin="miami"] .iax-cover.t-ink { background: var(--cover-2); color: #fff; } html[data-skin="miami"] .iax-cover.t-slate { background: var(--cover-1); color: #fff; } html[data-skin="miami"] .iax-cover.t-soft { background: rgba(255,95,162,0.18); color: #ffd9ee; } html[data-skin="miami"] .iax-foot-open { color: var(--c-text); } html[data-skin="miami"] .iax-bookrow-tx b { color: var(--ink); } html[data-skin="miami"] .iax-bookrow-tx span { color: var(--ink-3); } html[data-skin="miami"] .iax-bookrow-arrow { color: var(--c-text); } /* ── ACCOUNT PILL (cc-acct via --acct-* tokens) ────────────────────────────── */ html[data-skin="miami"] { --acct-surface: rgba(24, 16, 46, 0.92); --acct-ink: #efeaff; --acct-ink-2: #cbc1ee; --acct-ink-3: #a99fce; --acct-border: rgba(167, 139, 250, 0.3); --acct-tint: rgba(255, 95, 162, 0.16); } /* ── SETTINGS -> APPEARANCE (the picker reads our tokens; add a neon flourish) ─ */ html[data-skin="miami"] .ap-preview { background: var(--page-bg); border-color: var(--border); box-shadow: var(--shadow-2); } html[data-skin="miami"] .sk-tab[aria-pressed="true"], html[data-skin="miami"] .ap-tile[aria-pressed="true"] { border-color: #ff5fa2; box-shadow: inset 0 0 0 1px #ff5fa2, 0 0 14px rgba(255,95,162,0.3); } /* ── FOCUS RINGS — neon magenta everywhere a coral ring was ────────────────── */ html[data-skin="miami"] a.jrow:focus-visible, html[data-skin="miami"] .iax-card:focus-visible, html[data-skin="miami"] .dv-tab:focus-visible, html[data-skin="miami"] .dv-pick-trigger:focus-visible, html[data-skin="miami"] .dv-pick-row:focus-visible, html[data-skin="miami"] .btn-coral:focus-visible, html[data-skin="miami"] .btn-ghost-coral:focus-visible { outline-color: #ff5fa2; } /* ── MOMENTUM / STAT NUMBERS — neon ─────────────────────────────────────────── */ html[data-skin="miami"] .mom-n { color: var(--c-text); } html[data-skin="miami"] .mom-l { color: var(--ink-3); } /* ════════════════════════════════════════════════════════════════════════════ LIGHT TONE — html[data-skin="miami"][data-theme="light"] (REWORKED 2026-06-01) ---------------------------------------------------------------------------- A genuinely readable, AA-safe SUNSET-LIGHT variant. The dark default stays the optimized look; this is a real, legible alternative (it is offered). It keeps the Miami identity — a warm sunset-pink page, the neon-magenta accent, the glow/grid motif — but every TEXT token is AA on the light surface (>=4.5:1 body, >=3:1 UI). AUDIT FIX (the 6 light fails were a TOKEN-BLEED bug, not a "too pale" choice): the default plum accent block [data-accent="plum"] set --c-text:#ff7fd0 (the DARK near-white pink) with NO [data-theme="light"] qualifier, so in Miami light+plum (the default) it overrode this light block's --c-text and turned every --c-text-driven token (eyebrows, section labels, progress %, current-state) into near-white-on-white (2.1:1). Two structural fixes below cure it for good: (1) a [data-theme="light"][data-accent="plum"] block (after the dark plum block) that restores the AA magenta --c-text for the DEFAULT accent in light, and (2) the --acct-* account-pill tokens (set DARK in the base block) re-pointed to a LIGHT surface + dark ink (the account name was 1.08:1 near-white-on-white). Surfaces/ink are a touch deeper for a confident sunset-light read; AA verified for EVERY accent (plum/teal/indigo/coral/forest) in the _fix_skin_aa harness. ════════════════════════════════════════════════════════════════════════════ */ html[data-skin="miami"][data-theme="light"] { --bg: #fffafd; /* near-white warm card (opaque, so ink AA is exact) */ --bg-2: #fdf2f7; /* pale sunset-pink page ground */ --bg-3: #f7e6f0; /* recessed fill: tabs / pills / locked */ --card-2: #fff5fb; --border: rgba(177, 70, 154, 0.22); --border-strong: rgba(177, 70, 154, 0.34); --cover-1: #6d3cc0; --cover-2: #5a2fa0; --cover-3: #471f86; --ink: #2a1430; /* deep plum-ink — 16.4:1 on the card / 15.5:1 on the page */ --ink-2: #4a2c52; /* secondary — 11.5:1 on card */ --ink-3: #6a4a70; /* tertiary / meta — 7.2:1 on card / 6.8:1 on page (was #785a7b, lifted) */ --w-ink-4: #6a4a70; /* faintest AA mono/meta — same lifted tertiary */ --c-coral: #d6249f; /* hot magenta — bars / non-text accents */ --c-deep: #b1186f; /* fill behind a white label — AA (6.5:1) */ --c-text: #a8146b; /* small accent TEXT on the light surface — AA (6.5:1 on page) */ --accent-soft: #e090cc; --c-tint: rgba(214, 36, 159, 0.1); --c-tint2: rgba(214, 36, 159, 0.16); --c-line: rgba(214, 36, 159, 0.3); --c-wash: rgba(139, 92, 246, 0.07); --hm-0: var(--bg-3); --hm-1: #e6a8cf; --hm-2: #d6249f; --hm-3: #a8146b; --shadow-1: 0 1px 2px rgba(90,30,90,0.08), 0 2px 10px rgba(90,30,90,0.07); --shadow-2: 0 0 18px rgba(214,36,159,0.12), 0 8px 24px rgba(90,30,90,0.12); --shadow-3: 0 0 28px rgba(214,36,159,0.16), 0 18px 44px rgba(90,30,90,0.16); --shadow-coral: 0 0 16px rgba(177,24,111,0.28), 0 6px 16px rgba(177,24,111,0.18); --card-shadow: 0 0 18px rgba(214,36,159,0.1), 0 8px 22px rgba(90,30,90,0.1); /* account pill — re-point the DARK base --acct-* tokens to a LIGHT surface + dark ink (this is the "account name 1.08:1" fix; the base block set near-white ink). */ --acct-surface: #fffafd; --acct-ink: #2a1430; --acct-ink-2: #4a2c52; --acct-ink-3: #6a4a70; --acct-border: rgba(177, 70, 154, 0.24); --acct-tint: rgba(214, 36, 159, 0.1); --page-bg: radial-gradient(120% 95% at 12% -8%, rgba(255,95,162,0.22) 0%, rgba(255,95,162,0) 52%), radial-gradient(110% 90% at 92% 108%, rgba(34,211,238,0.16) 0%, rgba(34,211,238,0) 50%), radial-gradient(100% 80% at 50% 42%, rgba(139,92,246,0.1) 0%, rgba(139,92,246,0) 60%), #fdf2f7; } /* light tone: tone down the grid + horizon, recolor the gradient-text + glows */ html[data-skin="miami"][data-theme="light"] body::before { background-image: repeating-linear-gradient(to right, rgba(139,92,246,0.08) 0 1px, transparent 1px 64px), repeating-linear-gradient(to bottom, rgba(34,211,238,0.06) 0 1px, transparent 1px 52px); } html[data-skin="miami"][data-theme="light"] body::after { background: linear-gradient(to right, transparent, rgba(214,36,159,0.4) 22%, rgba(34,211,238,0.4) 78%, transparent); box-shadow: 0 0 12px rgba(214,36,159,0.3); } html[data-skin="miami"][data-theme="light"] .dash-head h1, html[data-skin="miami"][data-theme="light"] .iax-head h1 { color: #a8146b; background: linear-gradient(100deg, #c01b86 0%, #7b46d6 52%, #0e7d96 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } html[data-skin="miami"][data-theme="light"] .app-sidebar { background: rgba(255,255,255,0.82); } html[data-skin="miami"][data-theme="light"] .app-topbar { background: rgba(255,255,255,0.78); } /* the accent-tint chrome states: dark magenta ink in light (was near-white #ffd9ee in the base block). The default-accent --c-text is now AA in light, but these elements set a LITERAL #ffd9ee in the base block, so override each to the accent text token so they follow whatever accent the user picks. */ html[data-skin="miami"][data-theme="light"] .side-link.current, html[data-skin="miami"][data-theme="light"] .dv-tab.is-on, html[data-skin="miami"][data-theme="light"] .dv-pick-row[aria-checked="true"], html[data-skin="miami"][data-theme="light"] .iax-chip.on, html[data-skin="miami"][data-theme="light"] .iax-tab.on .iax-tab-n, html[data-skin="miami"][data-theme="light"] .id-role, html[data-skin="miami"][data-theme="light"] .ord-status.paid, html[data-skin="miami"][data-theme="light"] .ord-status.pending, html[data-skin="miami"][data-theme="light"] .iax-cover.t-soft { color: var(--c-text); } html[data-skin="miami"][data-theme="light"] .btn-ghost-coral { color: var(--c-text); } html[data-skin="miami"][data-theme="light"] .btn-ghost-coral:hover { color: #8a0f57; } /* ════════════════════════════════════════════════════════════════════════════ PER-SKIN ACCENT PALETTE — html[data-skin="miami"][data-accent=""] ---------------------------------------------------------------------------- Felipe 2026-05-31 (emphatic): the accent options are THEME-DEPENDENT. Miami's Appearance picker offers a NEON set (theme.js SKINS.miami.options.accents): plum → Neon Magenta (the default; the base block above already paints it) teal → Cyan indigo → Violet coral → Sunset (neon orange) forest → Lime The engine sets data-accent= on ; these blocks re-point the dashboard-local --c-* aliases (NOT inline → they win) so the WHOLE neon chrome (buttons via the gradients below, bars, active nav, pills, focus) recolors to the picked neon. Each id has a DARK (default tone) + a LIGHT variant. AA: every --c-text clears 4.5:1 on the Miami card; buttons carry a white label + a glow. NOTE on the gradient chrome: the base block's .btn-coral / .pbar / .jcover use literal magenta->cyan gradients. To make the picked accent read on those too, each accent block below re-paints the primary button + progress fill + the hero rail with a gradient anchored on the chosen hue (still a tasteful 2-stop neon). ════════════════════════════════════════════════════════════════════════════ */ /* default (plum = NEON MAGENTA): make the slot explicit so re-picking it restores the signature, identical to the base block (kept for symmetry + clarity). */ html[data-skin="miami"][data-accent="plum"] { --c-coral: #ff5fa2; --c-deep: #ff4d97; --c-text: #ff7fd0; --accent-soft: #ffa8d6; --c-tint: rgba(255,95,162,0.16); --c-tint2: rgba(255,95,162,0.24); --c-line: rgba(255,95,162,0.42); --c-wash: rgba(167,139,250,0.12); --hm-1: #7a4fb0; --hm-2: #ff5fa2; --hm-3: #ff7fd0; } /* CYAN */ html[data-skin="miami"][data-accent="teal"] { --c-coral: #22d3ee; --c-deep: #0e9fc4; --c-text: #67e8f9; --accent-soft: #a5f3fc; --c-tint: rgba(34,211,238,0.16); --c-tint2: rgba(34,211,238,0.24); --c-line: rgba(34,211,238,0.42); --c-wash: rgba(34,211,238,0.10); --hm-1: #2a6f9c; --hm-2: #22d3ee; --hm-3: #67e8f9; } html[data-skin="miami"][data-accent="teal"] .btn-coral { background: linear-gradient(120deg, #0e9fc4, #2bb6c8 60%, #5fd6e8); border-color: rgba(34,211,238,0.6); box-shadow: 0 0 20px rgba(34,211,238,0.45), 0 6px 16px rgba(8,4,22,0.5); } html[data-skin="miami"][data-accent="teal"] .btn-coral:hover { background: linear-gradient(120deg, #22d3ee, #5fd6e8 60%, #8af0ff); box-shadow: 0 0 26px rgba(34,211,238,0.5), 0 8px 20px rgba(8,4,22,0.55); } html[data-skin="miami"][data-accent="teal"] .pbar > i, html[data-skin="miami"][data-accent="teal"] .jbar > i, html[data-skin="miami"][data-accent="teal"] .hero-card::before { background: linear-gradient(to right, #22d3ee, #a78bfa); } html[data-skin="miami"][data-accent="teal"] .jrow.is-current .jcover { background: linear-gradient(135deg, #0e9fc4, #6d5cf0); } html[data-skin="miami"][data-accent="teal"] .jrow.is-completed .jcover { background: linear-gradient(135deg, #0e9fc4, #2bb6c8); } html[data-skin="miami"][data-accent="teal"] .dash-head h1, html[data-skin="miami"][data-accent="teal"] .iax-head h1 { background: linear-gradient(100deg, #67e8f9 0%, #a78bfa 52%, #ff8ad1 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #9ff0fb; } /* VIOLET */ html[data-skin="miami"][data-accent="indigo"] { --c-coral: #a78bfa; --c-deep: #8b5cf6; --c-text: #c4b5fd; --accent-soft: #ddd6fe; --c-tint: rgba(167,139,250,0.18); --c-tint2: rgba(167,139,250,0.26); --c-line: rgba(167,139,250,0.44); --c-wash: rgba(167,139,250,0.12); --hm-1: #5b4a9c; --hm-2: #a78bfa; --hm-3: #c4b5fd; } html[data-skin="miami"][data-accent="indigo"] .btn-coral { background: linear-gradient(120deg, #7c5cf0, #9b6bf5 60%, #c08bff); border-color: rgba(167,139,250,0.6); box-shadow: 0 0 20px rgba(139,92,246,0.45), 0 6px 16px rgba(8,4,22,0.5); } html[data-skin="miami"][data-accent="indigo"] .btn-coral:hover { background: linear-gradient(120deg, #8b5cf6, #a78bfa 60%, #d0aaff); box-shadow: 0 0 26px rgba(167,139,250,0.5), 0 8px 20px rgba(8,4,22,0.55); } html[data-skin="miami"][data-accent="indigo"] .pbar > i, html[data-skin="miami"][data-accent="indigo"] .jbar > i, html[data-skin="miami"][data-accent="indigo"] .hero-card::before { background: linear-gradient(to right, #a78bfa, #22d3ee); } html[data-skin="miami"][data-accent="indigo"] .jrow.is-current .jcover { background: linear-gradient(135deg, #7c5cf0, #ff5fa2); } html[data-skin="miami"][data-accent="indigo"] .jrow.is-completed .jcover { background: linear-gradient(135deg, #7c5cf0, #9b6bf5); } html[data-skin="miami"][data-accent="indigo"] .dash-head h1, html[data-skin="miami"][data-accent="indigo"] .iax-head h1 { background: linear-gradient(100deg, #c4b5fd 0%, #ff8ad1 52%, #6fe3f7 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #cfc3ff; } /* SUNSET (neon orange) */ html[data-skin="miami"][data-accent="coral"] { --c-coral: #ff7a45; --c-deep: #ff6a2c; --c-text: #ff9d6e; --accent-soft: #ffc7a8; --c-tint: rgba(255,122,69,0.16); --c-tint2: rgba(255,122,69,0.24); --c-line: rgba(255,122,69,0.42); --c-wash: rgba(255,122,69,0.10); --hm-1: #a85a36; --hm-2: #ff7a45; --hm-3: #ff9d6e; } html[data-skin="miami"][data-accent="coral"] .btn-coral { background: linear-gradient(120deg, #ff6a2c, #ff4d97 70%, #c44bd1); border-color: rgba(255,122,69,0.6); box-shadow: 0 0 20px rgba(255,106,44,0.45), 0 6px 16px rgba(8,4,22,0.5); } html[data-skin="miami"][data-accent="coral"] .btn-coral:hover { background: linear-gradient(120deg, #ff7a45, #ff5fa2 70%, #d05ce0); box-shadow: 0 0 26px rgba(255,122,69,0.5), 0 8px 20px rgba(8,4,22,0.55); } html[data-skin="miami"][data-accent="coral"] .pbar > i, html[data-skin="miami"][data-accent="coral"] .jbar > i, html[data-skin="miami"][data-accent="coral"] .hero-card::before { background: linear-gradient(to right, #ff7a45, #ff5fa2); } html[data-skin="miami"][data-accent="coral"] .jrow.is-current .jcover { background: linear-gradient(135deg, #ff6a2c, #c44bd1); } html[data-skin="miami"][data-accent="coral"] .jrow.is-completed .jcover { background: linear-gradient(135deg, #ff6a2c, #ff8f5c); } html[data-skin="miami"][data-accent="coral"] .dash-head h1, html[data-skin="miami"][data-accent="coral"] .iax-head h1 { background: linear-gradient(100deg, #ff9d6e 0%, #ff7fd0 52%, #6fe3f7 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #ffb892; } /* LIME */ html[data-skin="miami"][data-accent="forest"] { --c-coral: #7CFFB2; --c-deep: #3ad98a; --c-text: #9bf7c4; --accent-soft: #c4ffdd; --c-tint: rgba(124,255,178,0.14); --c-tint2: rgba(124,255,178,0.22); --c-line: rgba(124,255,178,0.40); --c-wash: rgba(124,255,178,0.10); --hm-1: #2f8f5e; --hm-2: #3ad98a; --hm-3: #7CFFB2; } html[data-skin="miami"][data-accent="forest"] .btn-coral { background: linear-gradient(120deg, #1fae6a, #2bd089 60%, #6d5cf0); border-color: rgba(124,255,178,0.55); box-shadow: 0 0 20px rgba(58,217,138,0.42), 0 6px 16px rgba(8,4,22,0.5); color: #fff; } html[data-skin="miami"][data-accent="forest"] .btn-coral:hover { background: linear-gradient(120deg, #2bd089, #5fe3a6 60%, #7a6bff); box-shadow: 0 0 26px rgba(58,217,138,0.5), 0 8px 20px rgba(8,4,22,0.55); } html[data-skin="miami"][data-accent="forest"] .pbar > i, html[data-skin="miami"][data-accent="forest"] .jbar > i, html[data-skin="miami"][data-accent="forest"] .hero-card::before { background: linear-gradient(to right, #3ad98a, #22d3ee); } html[data-skin="miami"][data-accent="forest"] .jrow.is-current .jcover { background: linear-gradient(135deg, #1fae6a, #6d5cf0); } html[data-skin="miami"][data-accent="forest"] .jrow.is-completed .jcover { background: linear-gradient(135deg, #1fae6a, #2bd089); } html[data-skin="miami"][data-accent="forest"] .dash-head h1, html[data-skin="miami"][data-accent="forest"] .iax-head h1 { background: linear-gradient(100deg, #9bf7c4 0%, #67e8f9 52%, #a78bfa 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #aef7cd; } /* the picked accent's focus ring follows --c-coral (so neon focus matches the hue) */ html[data-skin="miami"] a.jrow:focus-visible, html[data-skin="miami"] .iax-card:focus-visible, html[data-skin="miami"] .dv-tab:focus-visible, html[data-skin="miami"] .dv-pick-trigger:focus-visible, html[data-skin="miami"] .dv-pick-row:focus-visible, html[data-skin="miami"] .btn-coral:focus-visible, html[data-skin="miami"] .btn-ghost-coral:focus-visible { outline-color: var(--c-coral); } /* LIGHT-tone variants of the picked accent (deeper, AA on the pale base). The base light block sets a magenta default; these override per accent. PLUM (the default) MUST be explicit here: without it, the DARK [data-accent="plum"] block above (equal specificity, later in the file) wins in Miami light and sets --c-text:#ff7fd0 (near-white), turning every accent-text token to 2.1:1. This restores the AA magenta for the default accent in light. (Audit fix 2026-06-01.) */ html[data-skin="miami"][data-theme="light"][data-accent="plum"] { --c-coral: #d6249f; --c-deep: #b1186f; --c-text: #a8146b; --accent-soft: #e090cc; --c-tint: rgba(214,36,159,0.10); --c-tint2: rgba(214,36,159,0.16); --c-line: rgba(214,36,159,0.30); --hm-1: #e6a8cf; --hm-2: #d6249f; --hm-3: #a8146b; } html[data-skin="miami"][data-theme="light"][data-accent="teal"] { --c-coral: #0b8aa8; --c-deep: #0a7a96; --c-text: #096577; --accent-soft: #67d6e8; /* text lifted -> 5.0:1 on its own tint2 bed (audit fix 2026-06-01) */ --c-tint: rgba(11,138,168,0.10); --c-tint2: rgba(11,138,168,0.16); --c-line: rgba(11,138,168,0.30); } html[data-skin="miami"][data-theme="light"][data-accent="indigo"] { --c-coral: #6d4ef0; --c-deep: #5b3fd6; --c-text: #5736c4; --accent-soft: #b8a8f7; --c-tint: rgba(109,78,240,0.10); --c-tint2: rgba(109,78,240,0.16); --c-line: rgba(109,78,240,0.30); } html[data-skin="miami"][data-theme="light"][data-accent="coral"] { --c-coral: #e0561f; --c-deep: #c4471a; --c-text: #a83c14; --accent-soft: #ff9d6e; /* text lifted -> 4.8:1 on its own tint2 bed (audit fix 2026-06-01) */ --c-tint: rgba(224,86,31,0.10); --c-tint2: rgba(224,86,31,0.16); --c-line: rgba(224,86,31,0.30); } html[data-skin="miami"][data-theme="light"][data-accent="forest"] { --c-coral: #1a9c5e; --c-deep: #15824f; --c-text: #126b41; --accent-soft: #6fdca0; /* text lifted -> 5.0:1 on its own tint2 bed (audit fix 2026-06-01) */ --c-tint: rgba(26,156,94,0.10); --c-tint2: rgba(26,156,94,0.16); --c-line: rgba(26,156,94,0.30); } /* ── REDUCED MOTION — the skin uses no looping animation; bars keep their existing reduced-motion guards in dashboard.css. Nothing extra needed. ───── */