/* design-system.css — the SHARED design language for every AcoustiSim mode. Linked by BOTH the distributed app (css/style.css after this) and the PA prototype (prototypes/pa/css/style.css after this, via the absolute /css/ path — the main app's css/ deploys to the site root, so /css/ resolves under /pa too, exactly like the shared engine's /js/core/ imports). This is the single source of truth for the accent-theme tokens and the core recessed segmented-control. A mode's own style.css owns only its LAYOUT; skin + components live here so the two workspaces read as one app and can't drift. (engine reconvergence's sibling, at the UI layer.) */ /* ── Accent tokens + saved theme palettes (v0.40/v0.43 redesign) ──────────── --edge is the soft, low-contrast border that lets controls read as filled chips instead of outlined boxes (calm pass, v0.25.0). --edge-hi is the brighter hover/focus edge. Accent = the active/selected color, fully themeable via [data-theme] below (saved per user in localStorage; ui/theme.js). Default = Two-tone blue. Tokens: --acc primary (chevrons/dot) · --acc-on bright text · --acc-weak active-tab bg · --acc-fill1/2 active-toggle gradient · --acc-bd active border · --edge-hi hover border. The SPL heatmap legend gradient is NOT a UI accent and stays in each mode's own CSS. */ :root { --edge: #2a2f3a; --acc:#56c5f5; --acc-on:#8fd6ff; --acc-weak:#142546; --acc-fill1:#1b3566; --acc-fill2:#142546; --acc-bd:#3360a8; --edge-hi:#3360a8; } /* Saved themes — flip one data-theme attribute on to repaint the accent. Equal specificity to :root, so these must come AFTER it (source order wins). */ [data-theme="twoblue"] { --acc:#56c5f5; --acc-on:#8fd6ff; --acc-weak:#142546; --acc-fill1:#1b3566; --acc-fill2:#142546; --acc-bd:#3360a8; --edge-hi:#3360a8; } [data-theme="teal"] { --acc:#19b787; --acc-on:#7fe3c4; --acc-weak:#173a31; --acc-fill1:#1d4d40; --acc-fill2:#163d34; --acc-bd:#2c7d65; --edge-hi:#2c6e5a; } [data-theme="azure"] { --acc:#3b82f6; --acc-on:#9cc5ff; --acc-weak:#16294a; --acc-fill1:#1c3a63; --acc-fill2:#16294a; --acc-bd:#2f63ac; --edge-hi:#2f63ac; } [data-theme="sky"] { --acc:#38bdf8; --acc-on:#a6ddfb; --acc-weak:#0d2942; --acc-fill1:#103957; --acc-fill2:#0d2942; --acc-bd:#2174a6; --edge-hi:#2174a6; } [data-theme="indigo"] { --acc:#6f8ff0; --acc-on:#b9c6f6; --acc-weak:#1b203c; --acc-fill1:#232a4d; --acc-fill2:#1b203c; --acc-bd:#44519b; --edge-hi:#44519b; } [data-theme="red"] { --acc:#ef4444; --acc-on:#fca5a5; --acc-weak:#3a1719; --acc-fill1:#4a1d1f; --acc-fill2:#3a1719; --acc-bd:#8a3a3a; --edge-hi:#8a3a3a; } /* ── Recessed segmented control (Rect/Hex, density presets, PA mount/orient…) ── v0.40 redesign: the group is a sunken track (inset shadow); the ACTIVE button is a raised, accent-tinted thumb with a bevel. Reads like a desktop/DAW segmented control instead of a web pill. The whole .toggle is the track, so it gets the sunken bg + padding; individual buttons are transparent until active. No min-width:0 on buttons — with white-space:nowrap that let a flex item shrink below its label and clip the text (e.g. "Standard" → "Standar"). */ .toggle { display: flex; flex-wrap: wrap; gap: 2px; padding: 2px; border: 1px solid #11141a; border-radius: 5px; background: #0f1217; box-shadow: inset 0 1px 2px rgba(0,0,0,0.55); } .toggle button { flex: 1; padding: 5px 6px; border-radius: 3px; background: transparent; border: 1px solid transparent; color: #9aa5b5; font-size: 12px; cursor: pointer; white-space: nowrap; } .toggle button.active { background: linear-gradient(var(--acc-fill1), var(--acc-fill2)); color: var(--acc-on); border-color: var(--acc-bd); box-shadow: 0 1px 2px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.07); } .toggle button:hover:not(.active) { color: #cdd6e0; } /* ── Settings footer + accent-theme picker (shared chrome) ────────────────── The gear pins to the bottom of #panel (each mode makes #panel a flex column so margin-top:auto works). The theme swatches are driven by the SHARED js/ui/theme.js — one module, both modes import it; the accent is a global localStorage pref, so picking it in either workspace repaints both. */ .panel-footer { margin-top: auto; padding-top: 14px; } .gear-btn { display: flex; align-items: center; gap: 7px; width: 100%; padding: 8px 12px; background: #13151a; border: 1px solid var(--edge); border-radius: 8px; color: #9aa5b5; font-size: 12px; font-weight: 600; cursor: pointer; text-align: left; } .gear-btn:hover { border-color: var(--edge-hi); color: #cdd6e0; } .settings-panel { background: #13151a; border: 1px solid var(--edge); border-radius: 8px; padding: 11px 12px; margin-bottom: 8px; } .settings-head { text-transform: uppercase; letter-spacing: 0.05em; font-size: 11px; font-weight: 700; color: var(--acc-on); margin-bottom: 10px; } /* Theme picker — a row of accent swatches in the settings panel. Global pref. */ .theme-row { display: flex; align-items: center; gap: 8px; margin: 12px 0 2px; } .theme-row > .title { margin: 0; } .theme-swatches { display: flex; gap: 6px; } .theme-sw { width: 18px; height: 18px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; padding: 0; box-shadow: 0 0 0 1px rgba(0,0,0,0.4); } .theme-sw:hover { transform: scale(1.12); } .theme-sw.active { border-color: #e7edf4; } /* ── Panel header: logo badge + gradient wordmark (shared chrome) ──────────── Identical across modes; the wordmark/badge/version follow the themeable --acc so the header repaints with the accent picker. Mode-specific header buttons (distributed's ! beta + i info) stay in that mode's style.css. */ .panel-head { display: flex; align-items: center; justify-content: space-between; } .app-logo { display: flex; align-items: center; gap: 11px; } .logo-icon { flex-shrink: 0; } .logo-name { font-size: 18px; font-weight: 700; letter-spacing: -0.5px; line-height: 1; } /* "Acousti" — accent gradient text, matches the badge border */ .logo-accent { background: linear-gradient(90deg, var(--acc-on) 0%, var(--acc) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* "Sim" — lighter weight, muted so "Acousti" leads */ .logo-sim { color: color-mix(in srgb, var(--acc) 30%, #828893); font-weight: 400; } /* Wordmark + the status/version sub-line stack vertically next to the icon. */ .logo-text { display: flex; flex-direction: column; gap: 3px; } .logo-sub { display: flex; align-items: center; gap: 6px; line-height: 1; } /* Status pill (BETA / PA · Prototype) — accent fill, small caps. */ .beta-badge { font-size: 9px; font-weight: 700; letter-spacing: 0.5px; color: #0a0e14; background: var(--acc); border-radius: 3px; padding: 1px 5px; text-transform: uppercase; } .version-tag { font-size: 10px; color: color-mix(in srgb, var(--acc) 30%, #828893); } /* SPL particle cloud in the logo badge — drifts + twinkles like the 3D volume. */ @keyframes logo-drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(0.7px, -0.6px); } } .logo-particles { transform-origin: 20px 20px; animation: logo-drift 4.5s ease-in-out infinite; } @keyframes logo-twinkle { 0%, 100% { opacity: 0.95; } 50% { opacity: 0.5; } } .logo-particle { animation: logo-twinkle 3s ease-in-out infinite; } .logo-particle:nth-child(odd) { animation-duration: 3.6s; animation-delay: -1.2s; } .logo-particle:nth-child(3n) { animation-duration: 2.6s; animation-delay: -0.6s; }