/* Prism UI — the chrome design system used by the LinkedIn Post Generator. Monochrome tokens (light + dark), pill/icon buttons, panels, sliders, dot-grid colour. Set or "dark". */ :root, [data-prism="light"] { --bg:#ffffff; --fg:#0a0a0a; --fg-muted:#737373; --fg-soft:#a3a3a3; --border:#e5e5e5; --border-focus:#a3a3a3; --border-strong:#d4d4d4; --surface:#ffffff; --surface-soft:#f4f4f5; --surface-soft-hover:#ececef; --grid-dot:#e5e5e5; --radius:16px; --radius-sm:10px; --radius-xs:8px; --radius-2xs:6px; --radius-full:9999px; --font-base:'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif; --shadow-sm:0 1px 2px rgba(0,0,0,0.04); --shadow:0 8px 24px -8px rgba(0,0,0,0.12), 0 2px 8px -2px rgba(0,0,0,0.06); --ease:cubic-bezier(0.16,1,0.3,1); } [data-prism="dark"] { --bg:#0a0a0a; --fg:#f5f5f5; --fg-muted:#a3a3a3; --fg-soft:#525252; --border:#2a2a2a; --border-focus:#525252; --border-strong:#3d3d3d; --surface:#161616; --surface-soft:#1e1e1e; --surface-soft-hover:#252525; --grid-dot:#222222; --shadow-sm:0 1px 2px rgba(0,0,0,0.4); --shadow:0 8px 24px -8px rgba(0,0,0,0.7), 0 2px 8px -2px rgba(0,0,0,0.5); } .prism-root { font-family: var(--font-base); letter-spacing: -0.005em; color: var(--fg); background: var(--bg); transition: background .15s var(--ease), color .15s var(--ease); } /* Pill button — primary CTA */ .pill-btn { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px; height:38px; padding:0 18px; border-radius:var(--radius-full); background:var(--fg); color:var(--bg); border:0; font-family:var(--font-base); font-size:13px; font-weight:400; letter-spacing:-0.005em; cursor:pointer; box-shadow:var(--shadow-sm); white-space:nowrap; transition:background .15s var(--ease), transform .1s var(--ease); } .pill-btn:hover { background:color-mix(in srgb, var(--fg) 85%, var(--bg)); } .pill-btn:disabled { opacity:0.4; cursor:not-allowed; } /* Icon button — circular */ .icon-btn { width:38px; height:38px; border-radius:50%; border:1px solid var(--border); background:var(--surface); color:var(--fg); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:16px; padding:0; box-shadow:var(--shadow-sm); transition:background .15s var(--ease), border-color .15s var(--ease), transform .1s var(--ease); } .icon-btn:hover { background:var(--surface-soft); border-color:var(--border-focus); } .icon-btn:active { transform:scale(0.94); } .icon-btn.is-active { background:var(--fg); color:var(--bg); border-color:var(--fg); } /* Brand pill */ .brand-pill { display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 20px; border-radius:var(--radius-full); background:var(--surface); border:1px solid var(--border); font-size:13px; font-weight:500; box-shadow:var(--shadow-sm); } /* Toolbar — floating control cluster */ .toolbar { display:inline-flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border); border-radius:24px; padding:10px; box-shadow:var(--shadow); } /* Settings / debug panel */ .settings-panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; width:280px; } .settings-title { font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--fg-muted); margin:0 0 12px; font-weight:500; } .setting-row { display:flex; flex-direction:column; gap:6px; } .setting-row + .setting-row { margin-top:12px; } .setting-row .row-head { display:flex; justify-content:space-between; align-items:center; font-size:12px; } .setting-row .row-head .val { color:var(--fg-muted); font-variant-numeric:tabular-nums; } /* Range slider */ input[type="range"].range-input { -webkit-appearance:none; appearance:none; width:100%; height:3px; background:var(--border); border-radius:2px; outline:none; cursor:pointer; } input[type="range"].range-input::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:14px; height:14px; background:var(--fg); border-radius:50%; cursor:grab; border:2px solid var(--surface); box-shadow:var(--shadow-sm); transition:transform .15s var(--ease); } input[type="range"].range-input:hover::-webkit-slider-thumb { transform:scale(1.15); } input[type="range"].range-input::-moz-range-thumb { width:14px; height:14px; background:var(--fg); border-radius:50%; cursor:grab; border:2px solid var(--surface); } /* Theme swatch (post brand themes — the only colour in the UI) */ .theme-swatch { width:32px; height:32px; border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0; position:relative; overflow:hidden; flex-shrink:0; box-shadow:var(--shadow-sm); transition:transform .15s var(--ease); } .theme-swatch:hover { transform:scale(1.1); } .theme-swatch.is-active { border-color:var(--fg); } /* Inline-editable text — clean: no ring, no background fill. Just the native text caret on focus. The caret uses the current text colour. */ [data-editable] { outline:none; cursor:text; caret-color:currentColor; } @media (prefers-reduced-motion: reduce) { * { transition:none !important; } }