{
  "$schema": "https://pinlyx.com/resources/schema/widget-theme.json",
  "version": 1,
  "description": "Twelve widget themes. Import under Live Chat > Widgets > [yours] > Theme. Every pairing here clears 4.5:1 contrast for body text against its own surface.",
  "presets": [
    {
      "id": "corporate-blue",
      "name": "Corporate blue",
      "primaryColor": "#1d4ed8",
      "accentColor": "#3b82f6",
      "surfaceColor": "#ffffff",
      "textColor": "#0f172a",
      "borderRadius": "8px",
      "fontFamily": "system-ui, sans-serif",
      "note": "The safe default for B2B."
    },
    {
      "id": "corporate-navy",
      "name": "Corporate navy",
      "primaryColor": "#1e3a5f",
      "accentColor": "#2563eb",
      "surfaceColor": "#f8fafc",
      "textColor": "#0f172a",
      "borderRadius": "6px",
      "fontFamily": "system-ui, sans-serif",
      "note": "Finance, legal, insurance."
    },
    {
      "id": "playful-coral",
      "name": "Playful coral",
      "primaryColor": "#f43f5e",
      "accentColor": "#fb7185",
      "surfaceColor": "#fff1f2",
      "textColor": "#4c0519",
      "borderRadius": "16px",
      "fontFamily": "system-ui, sans-serif",
      "note": "Consumer and lifestyle brands."
    },
    {
      "id": "playful-amber",
      "name": "Playful amber",
      "primaryColor": "#d97706",
      "accentColor": "#f59e0b",
      "surfaceColor": "#fffbeb",
      "textColor": "#451a03",
      "borderRadius": "16px",
      "fontFamily": "system-ui, sans-serif",
      "note": "Food, retail, hospitality."
    },
    {
      "id": "neutral-slate",
      "name": "Neutral slate",
      "primaryColor": "#475569",
      "accentColor": "#64748b",
      "surfaceColor": "#f8fafc",
      "textColor": "#0f172a",
      "borderRadius": "8px",
      "fontFamily": "system-ui, sans-serif",
      "note": "When the widget should disappear."
    },
    {
      "id": "neutral-stone",
      "name": "Neutral stone",
      "primaryColor": "#57534e",
      "accentColor": "#78716c",
      "surfaceColor": "#fafaf9",
      "textColor": "#1c1917",
      "borderRadius": "4px",
      "fontFamily": "Georgia, serif",
      "note": "Editorial and publishing."
    },
    {
      "id": "dark-slate",
      "name": "Dark slate",
      "primaryColor": "#38bdf8",
      "accentColor": "#0ea5e9",
      "surfaceColor": "#0f172a",
      "textColor": "#e2e8f0",
      "borderRadius": "10px",
      "fontFamily": "system-ui, sans-serif",
      "note": "For dark-themed sites."
    },
    {
      "id": "dark-violet",
      "name": "Dark violet",
      "primaryColor": "#a78bfa",
      "accentColor": "#8b5cf6",
      "surfaceColor": "#1e1b4b",
      "textColor": "#ede9fe",
      "borderRadius": "12px",
      "fontFamily": "system-ui, sans-serif",
      "note": "Developer tools and AI products."
    },
    {
      "id": "mono-black",
      "name": "Monochrome",
      "primaryColor": "#111111",
      "accentColor": "#404040",
      "surfaceColor": "#ffffff",
      "textColor": "#111111",
      "borderRadius": "2px",
      "fontFamily": "system-ui, sans-serif",
      "note": "Fashion and architecture. Sharp corners on purpose."
    },
    {
      "id": "green-eco",
      "name": "Eco green",
      "primaryColor": "#15803d",
      "accentColor": "#22c55e",
      "surfaceColor": "#f0fdf4",
      "textColor": "#052e16",
      "borderRadius": "10px",
      "fontFamily": "system-ui, sans-serif",
      "note": "Sustainability and health."
    },
    {
      "id": "teal-clinical",
      "name": "Clinical teal",
      "primaryColor": "#0f766e",
      "accentColor": "#14b8a6",
      "surfaceColor": "#f0fdfa",
      "textColor": "#042f2e",
      "borderRadius": "8px",
      "fontFamily": "system-ui, sans-serif",
      "note": "Healthcare and wellbeing."
    },
    {
      "id": "high-contrast",
      "name": "High contrast",
      "primaryColor": "#0000cc",
      "accentColor": "#000080",
      "surfaceColor": "#ffffff",
      "textColor": "#000000",
      "borderRadius": "4px",
      "fontFamily": "system-ui, sans-serif",
      "note": "Accessibility-first. Clears 7:1 throughout."
    }
  ],
  "customCss": {
    "note": "Switch the theme mode to Custom CSS to go further. The widget exposes its palette as CSS custom properties, so you rarely need to target internal class names.",
    "variables": [
      "--crm-solid-primary",
      "--crm-solid-accent",
      "--crm-solid-surface",
      "--crm-solid-text",
      "--crm-solid-radius",
      "--crm-solid-font"
    ]
  },
  "testBeforeLaunch": [
    "mobile portrait",
    "tablet",
    "desktop",
    "dark-mode site",
    "page with its own high z-index header"
  ]
}