/* ============================================================================ SKIN: COSMOS (sci-fi space-ops HUD) - html[data-skin="cosmos"] ---------------------------------------------------------------------------- A dark-only space console, modeled on Felipe's reference image: a black space backdrop, an ORANGE wireframe HUD, a BLUE wireframe-grid terrain fading to a horizon, white particle scatter, mono telemetry text ("DISSOLVING · ENERGY 0.24 · ALIVE 12/16"), and targeting reticles. Authored against the TOKEN CONTRACT (dashboard.css top + MACRO-THEME-SKINS-2026-05-31.md). theme.js SKINS.cosmos: name "Cosmos", DEFAULT { tone dark, accent HUD-Orange (coral slot), font inter }, dark-only tones. THE LOOK - PURE BLACK base (#050507) + a faint STAR / particle field + a subtle blue PERSPECTIVE WIREFRAME GRID fading up to a horizon (like the image terrain) - cards = near-black translucent PANELS with a thin neon-ORANGE (#ff7a18) HUD border + CORNER-BRACKET / targeting-reticle ticks (::before / ::after) - MONO TELEMETRY typography for eyebrows / labels / numbers (Space Mono), uppercase, letter-spaced, small — the readout voice - accent chrome in neon ORANGE + electric BLUE (#3b6bff) + a terminal GREEN (#39ff8b): progress bars, active states, buttons GLOW - white particle-scatter accents + a quiet scanline/grid texture (subtle, never behind body text) - body text = light gray on black, AA (>=4.5:1) ENGINE NOTE (the accent): theme.js sets --accent / --accent-deep / --accent-text / --accent-soft / --coral-tint* / --coral-line INLINE on (Cosmos default accent = "coral", dark variant). Inline wins, so we do NOT fight the inline --accent*; instead we push the HUD orange by redefining the dashboard-local --c-* aliases (NOT inline -> they win) + literal hues on the chrome, and override the free --coral-tint family so the app.html shell chrome (.side-link.current bg, .id-role bed, the reader back link) reads HUD-orange. AA: --c-text (#ffa24d) is ~8.6:1 on the #0c0e14 panel; body ink (#d7dde8 / #aab4c4) clears AA on every Cosmos surface; the orange button carries a near- black label on a bright orange fill (AA), the blue/green buttons a white label. The grid + stars are low-alpha + masked away from the content band, so nothing sits behind body copy. dark-only (tones = dark / midnight). Scope rule: EVERY rule is under html[data-skin="cosmos"]. No emoji, no em dashes. ============================================================================ */ /* The mono TELEMETRY face for eyebrows / labels / numbers (CSP allows fonts.googleapis.com). Space Mono = the console readout voice; Orbitron is the display face for the big HUD title. Body keeps the user's --font (a clean sans). */ @import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Orbitron:wght@500;600;700&display=swap'); /* ── HUD PALETTE (literals; the Cosmos signature) ──────────────────────────── orange #ff7a18 (HUD line) · #ffa24d (orange text, AA on black) · electric blue #3b6bff · cyan #22d3ee · terminal green #39ff8b · star/particle white. */ html[data-skin="cosmos"] { /* HUD primitives (used by the chrome below + the per-accent picker) */ --hud-orange: #ff7a18; --hud-orange-soft: #ffa24d; --hud-blue: #3b6bff; --hud-grid: rgba(59,107,255,0.16); /* the blue wireframe terrain lines */ --hud-green: #39ff8b; --hud-star: rgba(255,255,255,0.85); /* ── SURFACES — pure-black base, near-black translucent panels ───────────── */ --bg: rgba(12, 14, 20, 0.78); /* card panel — near-black translucent */ --bg-2: #050507; /* page ground — pure black (the field rides on top) */ --bg-3: #0e1118; /* recessed fill: tabs / pills / locked wells */ --card-2: rgba(16, 19, 28, 0.72); /* faint alt panel */ --border: rgba(255,122,24,0.34); /* hairline — thin neon-orange HUD line */ --border-strong: rgba(255,122,24,0.55); /* dark cover/tile fills — deep navy-black so the HUD chrome reads on top */ --cover-1: #0c1834; --cover-2: #0a1226; --cover-3: #070d1c; /* ── INK RAMP — light gray on black, AA ───────────────────────────────────── */ --ink: #e6ebf3; /* primary text/heading — near-white (15:1 on the page) */ --ink-2: #c0c8d6; /* secondary — cool gray (9.6:1 on the panel) */ --ink-3: #9aa6ba; /* tertiary / meta — muted steel (5.4:1 on the panel) */ --w-ink-4: #93a0b6; /* faintest AA mono / meta — lifted to clear 4.5:1 */ /* ── ACCENT FAMILY (the dashboard-local --c-* aliases — NOT inline, so win) ── */ --c-coral: #ff7a18; /* bars / borders / non-text — HUD orange */ --c-deep: #ff7a18; /* "fill" hue (orange behind a near-black label) */ --c-text: #ffa24d; /* small accent TEXT on the panel — AA (8.6:1) */ --accent-soft: #ffc48a; /* soft accent on dark covers */ --c-tint: rgba(255,122,24,0.14); /* faint HUD fill: chips / banners / active rows */ --c-tint2: rgba(255,122,24,0.22); --c-line: rgba(255,122,24,0.46); /* HUD hairline */ --c-wash: rgba(59,107,255,0.10); /* hover / drag bed — a quiet blue wash */ /* the --coral-tint family is NOT inline -> override so the app.html shell chrome (current nav bg, id-role bed, reader back link) reads HUD-orange, not coral. */ --coral-tint: rgba(255,122,24,0.14); --coral-tint2: rgba(255,122,24,0.22); --coral-wash: rgba(59,107,255,0.10); --coral-line: rgba(255,122,24,0.46); /* heatmap ramp (sequential, black -> blue -> orange) */ --hm-0: var(--bg-3); --hm-1: #1f3a8a; --hm-2: #c25a10; --hm-3: #ff7a18; /* ── SHAPE — crisp, low-radius HUD panels ─────────────────────────────────── */ --radius-xs: 3px; --radius-sm: 4px; --radius: 6px; --radius-lg: 8px; --radius-xl: 10px; --border-weight: 1px; /* ── ELEVATION — a thin orange edge glow + deep black drop (SKIN HOOK) ─────── */ --shadow-1: 0 0 0 1px rgba(255,122,24,0.14), 0 2px 12px rgba(0,0,0,0.7); --shadow-2: 0 0 18px rgba(255,122,24,0.14), 0 10px 30px rgba(0,0,0,0.78); --shadow-3: 0 0 28px rgba(255,122,24,0.20), 0 24px 64px rgba(0,0,0,0.85); --shadow-coral: 0 0 16px rgba(255,122,24,0.5), 0 6px 16px rgba(0,0,0,0.6); --w-shadow: var(--shadow-1); --w-shadow-lift: var(--shadow-2); --card-shadow: 0 0 0 1px rgba(255,122,24,0.16), 0 8px 26px rgba(0,0,0,0.7); /* ── TYPE — Orbitron HUD display for headings; mono telemetry for labels ──── */ --font-display: 'Orbitron', 'Space Mono', ui-monospace, Consolas, monospace; --font-mono: 'Space Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; /* ── SKIN HOOK: the page background = black + star field + blue grid horizon ── */ /* Layered: (1) a faint blue glow rising from the horizon, (2) the pure-black base. The STAR field + the perspective GRID are drawn in the body::before / ::after pseudo-elements below (so they tile the viewport and stay fixed). */ --page-bg: radial-gradient(120% 80% at 50% 116%, rgba(59,107,255,0.18) 0%, rgba(59,107,255,0) 56%), radial-gradient(90% 60% at 80% -10%, rgba(255,122,24,0.06) 0%, rgba(255,122,24,0) 50%), #050507; } /* The page + shell: paint the black + horizon glow, then lay the STAR FIELD and the blue PERSPECTIVE GRID over it via fixed pseudo-elements (so they tile the whole viewport and do not scroll out from under long content). */ html[data-skin="cosmos"] body { background: var(--page-bg); background-attachment: fixed; } html[data-skin="cosmos"] .app-shell { background: transparent; position: relative; } /* STAR / PARTICLE SCATTER — small white dots via layered radial gradients, faint so they never compete with text. Tiled across the viewport, fixed. */ html[data-skin="cosmos"] body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(1.4px 1.4px at 18% 22%, var(--hud-star), transparent), radial-gradient(1.2px 1.2px at 62% 14%, rgba(255,255,255,0.7), transparent), radial-gradient(1.6px 1.6px at 84% 40%, var(--hud-star), transparent), radial-gradient(1.1px 1.1px at 33% 58%, rgba(255,255,255,0.6), transparent), radial-gradient(1.3px 1.3px at 72% 70%, rgba(255,255,255,0.75), transparent), radial-gradient(1.1px 1.1px at 9% 78%, rgba(255,255,255,0.5), transparent), radial-gradient(1.5px 1.5px at 48% 86%, var(--hud-star), transparent), radial-gradient(1.2px 1.2px at 92% 84%, rgba(255,255,255,0.6), transparent); background-repeat: repeat; background-size: 420px 420px; opacity: 0.7; } /* the blue PERSPECTIVE WIREFRAME GRID — a terrain plane: horizontal scan rows + verticals, fading UP toward a horizon line (the image's blue grid floor). */ html[data-skin="cosmos"] .app-shell::before { content: ""; position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 0; pointer-events: none; background-image: repeating-linear-gradient(to right, var(--hud-grid) 0 1px, transparent 1px 58px), repeating-linear-gradient(to bottom, var(--hud-grid) 0 1px, transparent 1px 46px); /* show the grid only in the lower band, fading toward the ~62% horizon (so the terrain reads as a floor receding to the horizon and never sits behind copy). */ -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 58%, rgba(0,0,0,0.4) 70%, rgba(0,0,0,0.85) 100%); mask-image: linear-gradient(to bottom, transparent 0%, transparent 58%, rgba(0,0,0,0.4) 70%, rgba(0,0,0,0.85) 100%); } /* the HORIZON line where the grid "lands" — a thin electric-blue glow rule. */ html[data-skin="cosmos"] .app-shell::after { content: ""; position: fixed; left: 0; right: 0; top: 62%; height: 1px; z-index: 0; pointer-events: none; background: linear-gradient(to right, transparent, rgba(59,107,255,0.55) 26%, rgba(34,211,238,0.4) 74%, transparent); box-shadow: 0 0 16px rgba(59,107,255,0.45); } /* keep the real content above the field layers */ html[data-skin="cosmos"] .app-shell > * { position: relative; z-index: 1; } /* ── SHELL / NAV ──────────────────────────────────────────────────────────── */ html[data-skin="cosmos"] .app-sidebar { background: rgba(7, 9, 14, 0.72); border-right: 1px solid var(--border); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } html[data-skin="cosmos"] .app-main { color: var(--ink); } html[data-skin="cosmos"] .side-link { color: var(--ink-2); border-radius: 4px; font-weight: 500; } html[data-skin="cosmos"] .side-link:hover { background: var(--c-wash); color: var(--ink); } /* active nav: HUD-orange bracket on the left edge + a faint orange bed */ html[data-skin="cosmos"] .side-link.current { background: var(--c-tint); color: var(--c-text); position: relative; box-shadow: inset 0 0 0 1px var(--c-line); } html[data-skin="cosmos"] .side-link.current::before { content: ""; position: absolute; left: -1px; top: 6px; bottom: 6px; width: 2px; background: var(--hud-orange); box-shadow: 0 0 10px rgba(255,122,24,0.7); } html[data-skin="cosmos"] .side-exit:hover { color: var(--c-text); } @media (max-width: 760px) { html[data-skin="cosmos"] .app-sidebar { background: rgba(5, 5, 7, 0.9); border-bottom: 1px solid var(--border); } } html[data-skin="cosmos"] .app-topbar { background: rgba(5, 5, 7, 0.6); border-bottom: 1px solid var(--border); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } /* the brand "PM" mark reads as a small lit HUD chip */ html[data-skin="cosmos"] .brand .mark { background: #0c1834; color: var(--hud-orange-soft); border-radius: 3px; box-shadow: inset 0 0 0 1px var(--c-line), 0 0 10px rgba(255,122,24,0.25); } html[data-skin="cosmos"] .brand-sub { color: var(--c-text); font-family: var(--font-mono); } /* ── HEADINGS — Orbitron HUD title; mono telemetry eyebrows ─────────────────── */ html[data-skin="cosmos"] .dash-head h1, html[data-skin="cosmos"] .iax-head h1, html[data-skin="cosmos"] .hero-title, html[data-skin="cosmos"] .jd-name, html[data-skin="cosmos"] .iax-cover-title, html[data-skin="cosmos"] .ws-head h1, html[data-skin="cosmos"] .ov-cont-h, html[data-skin="cosmos"] .set-section-head h2 { font-family: var(--font-display); letter-spacing: 0.01em; color: var(--ink); } /* eyebrows / micro-labels = the mono TELEMETRY readout voice (uppercase, spaced) */ html[data-skin="cosmos"] .dash-eyebrow, html[data-skin="cosmos"] .card-eyebrow, html[data-skin="cosmos"] .hero-eyebrow, html[data-skin="cosmos"] .cw-eyebrow, html[data-skin="cosmos"] .jsep-label, html[data-skin="cosmos"] .ap-pv-eye { color: var(--c-text); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; font-size: 0.92em; } /* ── CARDS — near-black translucent PANELS + thin orange HUD border + CORNER BRACKET reticles (the targeting-ticks from the image) ──────────────────── */ html[data-skin="cosmos"] .card, html[data-skin="cosmos"] .sec-card, html[data-skin="cosmos"] .iax-card, html[data-skin="cosmos"] .cw-tile, html[data-skin="cosmos"] .jrow, html[data-skin="cosmos"] .asg-card, html[data-skin="cosmos"] .ws-path-card, html[data-skin="cosmos"] .mom-card, html[data-skin="cosmos"] .iax-bookrow, html[data-skin="cosmos"] .ap-preview { background: var(--bg); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--border); box-shadow: var(--card-shadow); } /* the CORNER BRACKETS — four L-shaped ticks at the card corners (the reticle look). Drawn as a single ::before with four corner gradients clipped to thin lines. */ html[data-skin="cosmos"] .card, html[data-skin="cosmos"] .iax-card, html[data-skin="cosmos"] .hero-card { position: relative; } html[data-skin="cosmos"] .card::before, html[data-skin="cosmos"] .iax-card::before { content: ""; position: absolute; inset: 5px; pointer-events: none; z-index: 2; /* top-left + bottom-right L-brackets via corner-anchored linear gradients */ background: linear-gradient(to right, var(--hud-orange) 0 13px, transparent 13px) top left / 13px 2px no-repeat, linear-gradient(to bottom, var(--hud-orange) 0 13px, transparent 13px) top left / 2px 13px no-repeat, linear-gradient(to left, var(--hud-orange) 0 13px, transparent 13px) bottom right / 13px 2px no-repeat, linear-gradient(to top, var(--hud-orange) 0 13px, transparent 13px) bottom right / 2px 13px no-repeat; opacity: 0.85; } /* the other two corners (top-right + bottom-left) via ::after */ html[data-skin="cosmos"] .card::after, html[data-skin="cosmos"] .iax-card::after { content: ""; position: absolute; inset: 5px; pointer-events: none; z-index: 2; background: linear-gradient(to left, var(--hud-orange) 0 13px, transparent 13px) top right / 13px 2px no-repeat, linear-gradient(to bottom, var(--hud-orange) 0 13px, transparent 13px) top right / 2px 13px no-repeat, linear-gradient(to right, var(--hud-orange) 0 13px, transparent 13px) bottom left / 13px 2px no-repeat, linear-gradient(to top, var(--hud-orange) 0 13px, transparent 13px) bottom left / 2px 13px no-repeat; opacity: 0.85; } html[data-skin="cosmos"] a.iax-card:hover, html[data-skin="cosmos"] a.jrow:hover { box-shadow: var(--shadow-2); border-color: var(--border-strong); } /* the hero "Continue" rail -> a HUD-orange glow bar */ html[data-skin="cosmos"] .hero-card { border-color: var(--c-line); } html[data-skin="cosmos"] .hero-card::before { background: linear-gradient(to bottom, var(--hud-orange), #ff9d3d); width: 3px; box-shadow: 0 0 12px rgba(255,122,24,0.6); } /* ── BUTTONS — HUD-orange fill (near-black label) + glow; ghost = blue outline ── */ html[data-skin="cosmos"] .btn-coral { background: var(--hud-orange); color: #0a0a0c; border-color: var(--hud-orange); font-weight: 700; box-shadow: 0 0 18px rgba(255,122,24,0.4), 0 4px 12px rgba(0,0,0,0.5); } html[data-skin="cosmos"] .btn-coral:hover { background: #ff9233; border-color: #ffa24d; box-shadow: 0 0 26px rgba(255,122,24,0.55), 0 6px 16px rgba(0,0,0,0.55); color: #0a0a0c; } html[data-skin="cosmos"] .btn-ghost-coral { background: rgba(59,107,255,0.08); color: var(--hud-orange-soft); border-color: var(--c-line); box-shadow: none; } html[data-skin="cosmos"] .btn-ghost-coral:hover { background: rgba(255,122,24,0.12); color: #ffb86b; border-color: var(--border-strong); } /* ── PROGRESS / BARS — orange fill in a recessed black well + glow ──────────── */ html[data-skin="cosmos"] .pbar, html[data-skin="cosmos"] .jbar, html[data-skin="cosmos"] .ps-bar, html[data-skin="cosmos"] .vpl-bar { background: rgba(59,107,255,0.14); box-shadow: inset 0 0 0 1px rgba(59,107,255,0.2); } html[data-skin="cosmos"] .pbar > i, html[data-skin="cosmos"] .jbar > i, html[data-skin="cosmos"] .ps-bar > i { background: linear-gradient(to right, var(--hud-orange), #ff9d3d); box-shadow: 0 0 10px rgba(255,122,24,0.55); } html[data-skin="cosmos"] .jpct, html[data-skin="cosmos"] .mom-n { color: var(--c-text); font-family: var(--font-mono); } html[data-skin="cosmos"] .pbar-pct { color: var(--ink-2); } /* ── LADDER (journey / modules) ────────────────────────────────────────────── */ html[data-skin="cosmos"] .journey::before { background: rgba(59,107,255,0.28); } html[data-skin="cosmos"] .journey-divider { border-bottom-color: var(--border); } html[data-skin="cosmos"] .jd-count { color: var(--ink-3); font-family: var(--font-mono); } html[data-skin="cosmos"] .jsep-num { background: #0c1834; color: var(--hud-orange-soft); border-radius: 4px; box-shadow: inset 0 0 0 1px var(--c-line), 0 0 12px rgba(255,122,24,0.3); font-family: var(--font-mono); font-weight: 700; } /* the cover number tiles: orange-edged HUD chips for current/completed */ html[data-skin="cosmos"] .jcover { border-radius: 4px; } html[data-skin="cosmos"] .jrow.is-current .jcover { background: #1a2a55; box-shadow: inset 0 0 0 1px var(--c-line), 0 0 12px rgba(255,122,24,0.3); } html[data-skin="cosmos"] .jrow.is-current .jcover::after { background: var(--hud-orange); box-shadow: 0 0 10px rgba(255,122,24,0.8); } html[data-skin="cosmos"] .jrow.is-completed .jcover { background: #0e2a1c; box-shadow: inset 0 0 0 1px rgba(57,255,139,0.4); color: var(--hud-green); } html[data-skin="cosmos"] .jrow.is-completed .jcover .jnum, html[data-skin="cosmos"] .jrow.is-completed .jcover svg { color: var(--hud-green); } html[data-skin="cosmos"] .jrow.is-available .jcover { background: var(--cover-1); color: var(--ink); } html[data-skin="cosmos"] .jrow.is-locked .jcover { background: var(--bg-3); } html[data-skin="cosmos"] .jrow.is-locked .jcover .jnum, html[data-skin="cosmos"] .jrow.is-locked .jcover svg { color: var(--ink-3); } html[data-skin="cosmos"] .jtitle { color: var(--ink); } html[data-skin="cosmos"] .jrow.is-locked .jtitle { color: var(--ink-3); } html[data-skin="cosmos"] .jmeta { color: var(--ink-3); font-family: var(--font-mono); } /* terminal-GREEN "ONLINE/complete" state; orange chevron */ html[data-skin="cosmos"] .jstate.s-completed { color: var(--hud-green); } html[data-skin="cosmos"] .jgo { color: var(--c-text); } /* ── DASHBOARD-VIEW TABS / PICKER ──────────────────────────────────────────── */ html[data-skin="cosmos"] .dv-tab { color: var(--ink-2); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.94em; } html[data-skin="cosmos"] .dv-tab:hover { color: var(--ink); background: var(--c-wash); } html[data-skin="cosmos"] .dv-tab.is-on { color: var(--c-text); background: var(--c-tint); border-color: var(--c-line); box-shadow: 0 0 12px rgba(255,122,24,0.22); } html[data-skin="cosmos"] .dv-pick-trigger { background: var(--bg); color: var(--ink); border-color: var(--border); } html[data-skin="cosmos"] .dv-pick-trigger:hover { border-color: var(--border-strong); } html[data-skin="cosmos"] .dv-pick-menu { background: rgba(8, 10, 16, 0.97); border-color: var(--border); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--shadow-3); } html[data-skin="cosmos"] .dv-pick-row:hover { background: var(--c-wash); } html[data-skin="cosmos"] .dv-pick-row[aria-checked="true"] { background: var(--c-tint); color: var(--c-text); } html[data-skin="cosmos"] .dv-pick-ck { color: var(--c-text); } html[data-skin="cosmos"] .dv-sec-head, html[data-skin="cosmos"] .dv-sec-h { color: var(--ink-2); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; } /* ── PILLS / CHIPS / BANNERS — mono HUD readouts ───────────────────────────── */ html[data-skin="cosmos"] .jel { background: var(--c-tint); border-color: var(--c-line); color: var(--c-text); font-family: var(--font-mono); border-radius: 3px; } html[data-skin="cosmos"] .jel.coming { background: var(--bg-3); color: var(--ink-3); border-color: var(--border); } html[data-skin="cosmos"] .id-role { background: var(--c-tint); color: var(--c-text); border-color: var(--c-line); font-family: var(--font-mono); border-radius: 3px; } html[data-skin="cosmos"] .ord-status { font-family: var(--font-mono); border-radius: 3px; } html[data-skin="cosmos"] .ord-status.paid { background: rgba(57,255,139,0.14); color: var(--hud-green); } html[data-skin="cosmos"] .ord-status.pending { background: var(--c-tint2); color: var(--c-text); } html[data-skin="cosmos"] .ord-status.refunded, html[data-skin="cosmos"] .ord-status.failed, html[data-skin="cosmos"] .ord-status.canceled { background: var(--bg-3); color: var(--ink-3); } html[data-skin="cosmos"] .banner-ok { background: rgba(57,255,139,0.12); border-color: rgba(57,255,139,0.4); } html[data-skin="cosmos"] .banner-ok svg { color: var(--hud-green); } html[data-skin="cosmos"] .banner-note { background: var(--c-tint); border-color: var(--c-line); } /* ── EXPLORE (iax / xv) ────────────────────────────────────────────────────── */ html[data-skin="cosmos"] .iax-tab { color: var(--ink-3); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; } html[data-skin="cosmos"] .iax-tab:hover { color: var(--ink); } html[data-skin="cosmos"] .iax-tabs { border-bottom-color: var(--border); } html[data-skin="cosmos"] .iax-tab.on { color: var(--c-text); border-bottom-color: var(--hud-orange); } html[data-skin="cosmos"] .iax-tab.on .iax-tab-n { color: var(--c-text); background: var(--c-tint); border-color: var(--c-line); } html[data-skin="cosmos"] .iax-chip { background: var(--bg); color: var(--ink-2); border-color: var(--border); } html[data-skin="cosmos"] .iax-chip:hover { color: var(--c-text); border-color: var(--c-line); } html[data-skin="cosmos"] .iax-chip.on { background: var(--c-tint); color: var(--c-text); border-color: var(--c-line); } html[data-skin="cosmos"] .iax-search { background: var(--bg); border-color: var(--border); } html[data-skin="cosmos"] .iax-search:focus-within { border-color: var(--c-line); box-shadow: 0 0 0 3px rgba(255,122,24,0.18); } html[data-skin="cosmos"] .iax-search input { color: var(--ink); } html[data-skin="cosmos"] .iax-blurb { color: var(--ink-2); } /* explore cover tiles -> deep navy-black HUD tiles (white text AA) */ html[data-skin="cosmos"] .iax-cover.t-coral { background: linear-gradient(135deg, #3a2a10, #1a2a55); color: #fff; box-shadow: inset 0 0 0 1px var(--c-line); } html[data-skin="cosmos"] .iax-cover.t-ink { background: var(--cover-2); color: #fff; box-shadow: inset 0 0 0 1px rgba(59,107,255,0.2); } html[data-skin="cosmos"] .iax-cover.t-slate { background: var(--cover-1); color: #fff; box-shadow: inset 0 0 0 1px rgba(59,107,255,0.2); } html[data-skin="cosmos"] .iax-cover.t-soft { background: var(--c-tint); color: var(--c-text); } html[data-skin="cosmos"] .iax-foot-open { color: var(--c-text); } html[data-skin="cosmos"] .iax-bookrow-tx b { color: var(--ink); } html[data-skin="cosmos"] .iax-bookrow-tx span { color: var(--ink-3); } html[data-skin="cosmos"] .iax-bookrow-arrow { color: var(--c-text); } /* ── ACCOUNT PILL (cc-acct via --acct-* tokens) ────────────────────────────── */ html[data-skin="cosmos"] { --acct-surface: rgba(10, 12, 18, 0.94); --acct-ink: #e6ebf3; --acct-ink-2: #c0c8d6; --acct-ink-3: #9aa6ba; --acct-border: rgba(255,122,24,0.34); --acct-tint: rgba(255,122,24,0.14); } /* ── SETTINGS -> APPEARANCE (the picker reads our tokens; add a HUD flourish) ── */ html[data-skin="cosmos"] .ap-preview { background: var(--page-bg); border-color: var(--border); box-shadow: var(--shadow-2); } html[data-skin="cosmos"] .sk-tab[aria-pressed="true"], html[data-skin="cosmos"] .ap-tile[aria-pressed="true"], html[data-skin="cosmos"] .ap-style[aria-pressed="true"], html[data-skin="cosmos"] .ap-font[aria-pressed="true"] { border-color: var(--hud-orange); box-shadow: inset 0 0 0 1px var(--hud-orange), 0 0 14px rgba(255,122,24,0.3); } /* ── FOCUS RINGS — HUD orange everywhere a coral ring was ───────────────────── */ html[data-skin="cosmos"] a.jrow:focus-visible, html[data-skin="cosmos"] .iax-card:focus-visible, html[data-skin="cosmos"] .dv-tab:focus-visible, html[data-skin="cosmos"] .dv-pick-trigger:focus-visible, html[data-skin="cosmos"] .dv-pick-row:focus-visible, html[data-skin="cosmos"] .side-link:focus-visible, html[data-skin="cosmos"] .btn-coral:focus-visible, html[data-skin="cosmos"] .btn-ghost-coral:focus-visible, html[data-skin="cosmos"] .ap-tile:focus-visible, html[data-skin="cosmos"] .sk-tab:focus-visible { outline-color: var(--c-coral); } /* ── MOMENTUM / STAT LABELS — mono ──────────────────────────────────────────── */ html[data-skin="cosmos"] .mom-l { color: var(--ink-3); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; } /* ════════════════════════════════════════════════════════════════════════════ MIDNIGHT TONE — html[data-skin="cosmos"][data-theme="midnight"] Cosmos is dark-only; the second offered tone (midnight) nudges the base toward a deep-indigo void with a touch more blue in the grid, keeping the same HUD. ════════════════════════════════════════════════════════════════════════════ */ html[data-skin="cosmos"][data-theme="midnight"] { --bg: rgba(14, 13, 28, 0.8); --bg-2: #07061a; --bg-3: #120f2c; --card-2: rgba(18, 16, 36, 0.74); --cover-1: #141c4a; --cover-2: #0e1438; --cover-3: #0a0e2a; --hud-grid: rgba(80,110,255,0.18); --page-bg: radial-gradient(120% 80% at 50% 116%, rgba(80,110,255,0.2) 0%, rgba(80,110,255,0) 56%), radial-gradient(90% 60% at 80% -10%, rgba(255,122,24,0.06) 0%, rgba(255,122,24,0) 50%), #07061a; } /* ════════════════════════════════════════════════════════════════════════════ PER-SKIN ACCENT PALETTE — html[data-skin="cosmos"][data-accent=""] ---------------------------------------------------------------------------- The HUD accent set (theme.js SKINS.cosmos.options.accents): coral -> HUD Orange (the default; the base block already paints it) teal -> Cyan indigo -> Electric Blue forest -> Terminal Green plum -> Plasma (magenta) The engine sets data-accent=; these re-point the dashboard-local --c-* aliases + the --hud-orange primitive + the --coral-tint family (all NOT inline -> they win) so the WHOLE HUD chrome (corner brackets, buttons, bars, active nav, pills, focus) recolors to the picked signal color. AA: every --c-text clears 4.5:1 on the panel; orange/green/cyan buttons carry a near-black label, blue/plasma a white label. ════════════════════════════════════════════════════════════════════════════ */ /* default (coral = HUD ORANGE): explicit so re-picking restores the signature. */ html[data-skin="cosmos"][data-accent="coral"] { --hud-orange: #ff7a18; --hud-orange-soft: #ffa24d; --c-coral: #ff7a18; --c-deep: #ff7a18; --c-text: #ffa24d; --accent-soft: #ffc48a; --c-tint: rgba(255,122,24,0.14); --c-tint2: rgba(255,122,24,0.22); --c-line: rgba(255,122,24,0.46); --c-wash: rgba(59,107,255,0.10); --border: rgba(255,122,24,0.34); --border-strong: rgba(255,122,24,0.55); --coral-tint: rgba(255,122,24,0.14); --coral-tint2: rgba(255,122,24,0.22); --coral-line: rgba(255,122,24,0.46); --hm-1: #1f3a8a; --hm-2: #c25a10; --hm-3: #ff7a18; } /* CYAN */ html[data-skin="cosmos"][data-accent="teal"] { --hud-orange: #22d3ee; --hud-orange-soft: #67e8f9; --c-coral: #22d3ee; --c-deep: #22d3ee; --c-text: #67e8f9; --accent-soft: #a5f3fc; --c-tint: rgba(34,211,238,0.14); --c-tint2: rgba(34,211,238,0.22); --c-line: rgba(34,211,238,0.46); --c-wash: rgba(34,211,238,0.10); --border: rgba(34,211,238,0.34); --border-strong: rgba(34,211,238,0.55); --coral-tint: rgba(34,211,238,0.14); --coral-tint2: rgba(34,211,238,0.22); --coral-line: rgba(34,211,238,0.46); --hm-1: #14627a; --hm-2: #16a3c0; --hm-3: #22d3ee; } html[data-skin="cosmos"][data-accent="teal"] .btn-coral { background: #22d3ee; border-color: #22d3ee; color: #04121a; box-shadow: 0 0 18px rgba(34,211,238,0.4), 0 4px 12px rgba(0,0,0,0.5); } html[data-skin="cosmos"][data-accent="teal"] .btn-coral:hover { background: #5fe0f5; border-color: #67e8f9; color: #04121a; } html[data-skin="cosmos"][data-accent="teal"] .pbar > i, html[data-skin="cosmos"][data-accent="teal"] .jbar > i, html[data-skin="cosmos"][data-accent="teal"] .ps-bar > i { background: linear-gradient(to right, #22d3ee, #67e8f9); box-shadow: 0 0 10px rgba(34,211,238,0.55); } /* ELECTRIC BLUE — the white-label button fill is DARKENED to --c-deep #2f57e0 (white-on-#2f57e0 = 5.90:1, AA); the bright #3b6bff stays as the glow/accent hue. The hover fill (#3f66ec) also clears 4.5:1 with white. (Audit fix 2026-06-01.) */ html[data-skin="cosmos"][data-accent="indigo"] { --hud-orange: #3b6bff; --hud-orange-soft: #7d9bff; --c-coral: #3b6bff; --c-deep: #2f57e0; --c-text: #8fa8ff; --accent-soft: #b3c4ff; --c-tint: rgba(59,107,255,0.16); --c-tint2: rgba(59,107,255,0.24); --c-line: rgba(59,107,255,0.48); --c-wash: rgba(59,107,255,0.12); --border: rgba(59,107,255,0.36); --border-strong: rgba(59,107,255,0.58); --coral-tint: rgba(59,107,255,0.16); --coral-tint2: rgba(59,107,255,0.24); --coral-line: rgba(59,107,255,0.48); --hm-1: #1f3a8a; --hm-2: #2f54c8; --hm-3: #3b6bff; } html[data-skin="cosmos"][data-accent="indigo"] .btn-coral { background: #2f57e0; border-color: #2f57e0; color: #fff; box-shadow: 0 0 18px rgba(59,107,255,0.45), 0 4px 12px rgba(0,0,0,0.5); } html[data-skin="cosmos"][data-accent="indigo"] .btn-coral:hover { background: #3f66ec; border-color: #7d9bff; color: #fff; } html[data-skin="cosmos"][data-accent="indigo"] .pbar > i, html[data-skin="cosmos"][data-accent="indigo"] .jbar > i, html[data-skin="cosmos"][data-accent="indigo"] .ps-bar > i { background: linear-gradient(to right, #3b6bff, #7d9bff); box-shadow: 0 0 10px rgba(59,107,255,0.55); } /* TERMINAL GREEN */ html[data-skin="cosmos"][data-accent="forest"] { --hud-orange: #39ff8b; --hud-orange-soft: #7dffb6; --c-coral: #39ff8b; --c-deep: #2ad673; --c-text: #7dffb6; --accent-soft: #b6ffd6; --c-tint: rgba(57,255,139,0.12); --c-tint2: rgba(57,255,139,0.2); --c-line: rgba(57,255,139,0.42); --c-wash: rgba(57,255,139,0.08); --border: rgba(57,255,139,0.3); --border-strong: rgba(57,255,139,0.5); --coral-tint: rgba(57,255,139,0.12); --coral-tint2: rgba(57,255,139,0.2); --coral-line: rgba(57,255,139,0.42); --hm-1: #1a7a4a; --hm-2: #25c070; --hm-3: #39ff8b; } html[data-skin="cosmos"][data-accent="forest"] .btn-coral { background: #39ff8b; border-color: #39ff8b; color: #042412; box-shadow: 0 0 18px rgba(57,255,139,0.4), 0 4px 12px rgba(0,0,0,0.5); } html[data-skin="cosmos"][data-accent="forest"] .btn-coral:hover { background: #6affa8; border-color: #7dffb6; color: #042412; } html[data-skin="cosmos"][data-accent="forest"] .pbar > i, html[data-skin="cosmos"][data-accent="forest"] .jbar > i, html[data-skin="cosmos"][data-accent="forest"] .ps-bar > i { background: linear-gradient(to right, #39ff8b, #7dffb6); box-shadow: 0 0 10px rgba(57,255,139,0.55); } /* PLASMA (magenta) — the white-label button fill is DARKENED to --c-deep #9a2fd6 (white-on-#9a2fd6 = 5.60:1, AA); the bright #c84bff stays the glow/accent hue. The hover fill (#a83fe0) also clears 4.5:1 with white. (Audit fix 2026-06-01.) */ html[data-skin="cosmos"][data-accent="plum"] { --hud-orange: #c84bff; --hud-orange-soft: #df8cff; --c-coral: #c84bff; --c-deep: #9a2fd6; --c-text: #df8cff; --accent-soft: #ecb6ff; --c-tint: rgba(200,75,255,0.14); --c-tint2: rgba(200,75,255,0.22); --c-line: rgba(200,75,255,0.46); --c-wash: rgba(200,75,255,0.10); --border: rgba(200,75,255,0.34); --border-strong: rgba(200,75,255,0.55); --coral-tint: rgba(200,75,255,0.14); --coral-tint2: rgba(200,75,255,0.22); --coral-line: rgba(200,75,255,0.46); --hm-1: #6a2c8f; --hm-2: #9d3bd6; --hm-3: #c84bff; } html[data-skin="cosmos"][data-accent="plum"] .btn-coral { background: #9a2fd6; border-color: #9a2fd6; color: #fff; box-shadow: 0 0 18px rgba(200,75,255,0.45), 0 4px 12px rgba(0,0,0,0.5); } html[data-skin="cosmos"][data-accent="plum"] .btn-coral:hover { background: #a83fe0; border-color: #df8cff; color: #fff; } html[data-skin="cosmos"][data-accent="plum"] .pbar > i, html[data-skin="cosmos"][data-accent="plum"] .jbar > i, html[data-skin="cosmos"][data-accent="plum"] .ps-bar > i { background: linear-gradient(to right, #c84bff, #df8cff); box-shadow: 0 0 10px rgba(200,75,255,0.55); } /* ── REDUCED MOTION — the skin uses no looping animation; nothing extra. ────── */