/* ============================================================================ ROL-SOUND — Shared design system: unified button hierarchy Single source of truth for button color/hierarchy across all pages. Loaded LAST in each page's so it normalises the button palette regardless of each page's local styles. It overrides COLOUR ONLY (background / text / border / weight + hover) and never touches size, padding, width or radius — so every page keeps its own layout. The four tiers (approved look book v3): Primary solid blue #4aa3ff + dark ink text — the decisive action Secondary blue tint 16% fill + light-blue text — supporting actions Ghost outline grey border + grey text — neutral / back Danger soft red 16% fill + red text — destructive ============================================================================ */ /* ── Primary — solid ─────────────────────────────────────────────────────── */ button.primary, .btn-primary, .btn.primary{ background:#4aa3ff; color:#08121f; border-color:#4aa3ff; font-weight:600; } button.primary:hover, .btn-primary:hover, .btn.primary:hover{ background:#5aabff; border-color:#5aabff; color:#08121f; } /* ── Secondary — blue tint fill (supporting actions: save / add / export) ─── */ button.go, button.save, .menu-btn, .btn.secondary{ background:rgba(74,163,255,0.16); color:#7ab8ff; border-color:rgba(74,163,255,0.45); font-weight:600; } button.go:hover, button.save:hover, .menu-btn:hover, .btn.secondary:hover{ background:rgba(74,163,255,0.26); color:#8ec2ff; border-color:rgba(74,163,255,0.55); } /* ── Add — dashed secondary ("+ add another") ────────────────────────────── */ button.add{ background:rgba(74,163,255,0.10); color:#7ab8ff; border-color:rgba(74,163,255,0.45); font-weight:600; } button.add:hover{ background:rgba(74,163,255,0.18); color:#8ec2ff; } /* ── Ghost — outline only (neutral / back / small utility) ───────────────── */ .btn.ghost, .btn-secondary, .tiny{ background:transparent; color:#c2c9d4; border-color:#3a424e; } .btn.ghost:hover, .btn-secondary:hover, .tiny:hover{ background:rgba(255,255,255,0.04); color:#eef1f6; border-color:#4a5361; } /* ── Danger — soft red pill (delete / remove) ────────────────────────────── */ button.del, .tiny.del, .menu-btn.del, .x-btn, .btn.danger{ background:rgba(255,107,107,0.16); color:#ff8080; border-color:transparent; font-weight:600; } button.del:hover, .tiny.del:hover, .menu-btn.del:hover, .x-btn:hover, .btn.danger:hover{ background:rgba(255,107,107,0.26); color:#ff8080; } /* ── Menu items: separator + destructive line item ───────────────────────── */ /* Destructive actions live as the last line of a menu (danger-styled), never as a standalone red button. */ .menu-sep{height:1px;background:#2a3039;margin:4px 0} .menu-list a.danger{color:#ff8080} .menu-list a.danger:hover{background:rgba(255,107,107,0.16);color:#ff8080} /* Universal options-menu trigger: a standalone cogwheel (no box) used top-right on every tier. Row/card action menus keep the kebab (⋯). */ .cog{background:transparent;border:none;color:#c2c9d4;cursor:pointer;font-size:22px; line-height:1;padding:2px 4px;display:inline-flex;align-items:center} .cog:hover{color:#4aa3ff;background:transparent}