refactor: Script Library and Builder design critique fixes

Library:
- Clear CTA hierarchy: "Build New Script" primary, "Import Script" ghost,
  "Manage" demoted to text link
- "New from Script" → "Import Script" (clearer label)

Script Builder:
- Add suggestion chips for first-time users (4 common MSP tasks)
- Chips auto-hide after first message

Design system normalization:
- ScriptPreviewModal: bg-black/80 → bg-black/40, text-blue-400 → text-accent-text,
  emerald save button → primary, inline rgba → CSS variables
- ScriptCodeBlock: bg-[rgba(0,0,0,0.3)] → bg-code, text-blue-400 → text-accent-text,
  text-text-muted typo fixed, emerald button → ghost style
- TemplateCard: emerald/amber/rose badges → success-dim/warning-dim/danger-dim,
  ShieldAlert amber → warning token
- ParameterDetectorStepper: blue focus ring → orange, amber → warning token,
  "Candidate" → "Variable" in stepper progress

Jargon clarification:
- "Detect Parameters" → "Find Variables"
- "Detected Parameters" → "Configurable Variables"
- "Parameters (N)" → "Variables (N)"
- Detection summary copy reworded for clarity

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/components/scripts/TemplateCard.tsx

@@ -3,9 +3,9 @@ import { cn } from '@/lib/utils'
 import type { ScriptTemplateListItem } from '@/types'
 
 const COMPLEXITY_CLASSES: Record<ScriptTemplateListItem['complexity'], string> = {
-  beginner: 'text-emerald-400 bg-emerald-400/10',
-  intermediate: 'text-amber-400 bg-amber-400/10',
-  advanced: 'text-rose-500 bg-rose-500/10',
+  beginner: 'text-success bg-success-dim',
+  intermediate: 'text-warning bg-warning-dim',
+  advanced: 'text-danger bg-danger-dim',
 }
 
 interface Props {
@@ -28,7 +28,7 @@ export function TemplateCard({ template, onConfigure }: Props) {
         <div className="flex items-center gap-1.5 shrink-0">
           {template.requires_elevation && (
             <span title="Requires administrator elevation">
-              <ShieldAlert size={13} className="text-amber-400" />
+              <ShieldAlert size={13} className="text-warning" />
             </span>
           )}
           <span className={cn('font-sans text-[0.625rem] uppercase tracking-wide px-1.5 py-0.5 rounded', COMPLEXITY_CLASSES[template.complexity])}>
@@ -62,7 +62,7 @@ export function TemplateCard({ template, onConfigure }: Props) {
         <button
           type="button"
           onClick={() => onConfigure(template.id)}
-          className="shrink-0 bg-primary/10 border border-primary/20 text-primary text-xs px-2.5 py-1 rounded-md hover:bg-primary/20 transition-colors"
+          className="shrink-0 bg-accent-dim border border-primary/20 text-accent-text text-xs px-2.5 py-1 rounded-md hover:bg-primary/20 transition-colors"
         >
           Configure →
         </button>