{
  "name": "Bubblegum",
  "version": 1,
  "meta": {
    "source": "wallflower-ui",
    "preset": "bubblegum",
    "fonts": {
      "sans": "Nunito",
      "display": "Fredoka",
      "serif": "Young Serif",
      "mono": "DM Mono"
    }
  },
  "color": {
    "themes": [
      {
        "id": "light",
        "name": "Light"
      },
      {
        "id": "dark",
        "name": "Dark"
      }
    ],
    "tokens": [
      {
        "name": "background",
        "value": {
          "light": "#fff7fc",
          "dark": "#1a0f2b"
        },
        "usage": "Page background."
      },
      {
        "name": "foreground",
        "value": {
          "light": "#2b1442",
          "dark": "#fbefff"
        },
        "usage": "Body text on background."
      },
      {
        "name": "card",
        "value": {
          "light": "#ffffff",
          "dark": "#24163a"
        },
        "usage": "Card and panel surface."
      },
      {
        "name": "card-foreground",
        "value": {
          "light": "#2b1442",
          "dark": "#fbefff"
        },
        "usage": "Text on card."
      },
      {
        "name": "popover",
        "value": {
          "light": "#ffffff",
          "dark": "#24163a"
        },
        "usage": "Menus, popovers, tooltips."
      },
      {
        "name": "popover-foreground",
        "value": {
          "light": "#2b1442",
          "dark": "#fbefff"
        },
        "usage": "Text on popover."
      },
      {
        "name": "primary",
        "value": {
          "light": "#7c2df0",
          "dark": "#c69bff"
        },
        "usage": "Primary buttons and key actions."
      },
      {
        "name": "primary-foreground",
        "value": {
          "light": "#ffffff",
          "dark": "#1d0938"
        },
        "usage": "Text and icons on primary."
      },
      {
        "name": "secondary",
        "value": {
          "light": "#ffe36e",
          "dark": "#ffe36e"
        },
        "usage": "Secondary buttons, subtle fills."
      },
      {
        "name": "secondary-foreground",
        "value": {
          "light": "#2b1442",
          "dark": "#2b1442"
        },
        "usage": "Text on secondary."
      },
      {
        "name": "muted",
        "value": {
          "light": "#f6ebfa",
          "dark": "#2c1d45"
        },
        "usage": "Muted fills: skeletons, code, table stripes."
      },
      {
        "name": "muted-foreground",
        "value": {
          "light": "#6e4f8a",
          "dark": "#c9b3e3"
        },
        "usage": "Secondary text on background or muted."
      },
      {
        "name": "accent",
        "value": {
          "light": "#d9f4ff",
          "dark": "#1f3a52"
        },
        "usage": "Hover and selected fills for menu items."
      },
      {
        "name": "accent-foreground",
        "value": {
          "light": "#12304a",
          "dark": "#d9f4ff"
        },
        "usage": "Text on accent."
      },
      {
        "name": "destructive",
        "value": {
          "light": "#d61f57",
          "dark": "#ff6b9a"
        },
        "usage": "Destructive actions and errors."
      },
      {
        "name": "destructive-foreground",
        "value": {
          "light": "#ffffff",
          "dark": "#2a0614"
        },
        "usage": "Text on destructive."
      },
      {
        "name": "border",
        "value": {
          "light": "#ecd5f5",
          "dark": "#3a2858"
        },
        "usage": "Dividers and card borders."
      },
      {
        "name": "input",
        "value": {
          "light": "#9a76b8",
          "dark": "#7a62a0"
        },
        "usage": "Form control borders (3:1 on background)."
      },
      {
        "name": "ring",
        "value": {
          "light": "#7c2df0",
          "dark": "#c69bff"
        },
        "usage": "Focus rings."
      },
      {
        "name": "chart-1",
        "value": {
          "light": "#ff4fa3",
          "dark": "#ff7cbd"
        },
        "usage": "Chart and sidebar colors (shadcn/ui)."
      },
      {
        "name": "chart-2",
        "value": {
          "light": "#7c2df0",
          "dark": "#c69bff"
        },
        "usage": "Chart and sidebar colors (shadcn/ui)."
      },
      {
        "name": "chart-3",
        "value": {
          "light": "#29b6f6",
          "dark": "#5fd0ff"
        },
        "usage": "Chart and sidebar colors (shadcn/ui)."
      },
      {
        "name": "chart-4",
        "value": {
          "light": "#ffc72c",
          "dark": "#ffd85e"
        },
        "usage": "Chart and sidebar colors (shadcn/ui)."
      },
      {
        "name": "chart-5",
        "value": {
          "light": "#2ecc71",
          "dark": "#5fe3a1"
        },
        "usage": "Chart and sidebar colors (shadcn/ui)."
      },
      {
        "name": "sidebar",
        "value": {
          "light": "#fdeef8",
          "dark": "#160c25"
        },
        "usage": "Chart and sidebar colors (shadcn/ui)."
      },
      {
        "name": "sidebar-foreground",
        "value": {
          "light": "#2b1442",
          "dark": "#fbefff"
        },
        "usage": "Chart and sidebar colors (shadcn/ui)."
      },
      {
        "name": "sidebar-primary",
        "value": {
          "light": "#7c2df0",
          "dark": "#c69bff"
        },
        "usage": "Chart and sidebar colors (shadcn/ui)."
      },
      {
        "name": "sidebar-primary-foreground",
        "value": {
          "light": "#ffffff",
          "dark": "#1d0938"
        },
        "usage": "Chart and sidebar colors (shadcn/ui)."
      },
      {
        "name": "sidebar-accent",
        "value": {
          "light": "#f6ebfa",
          "dark": "#2c1d45"
        },
        "usage": "Chart and sidebar colors (shadcn/ui)."
      },
      {
        "name": "sidebar-accent-foreground",
        "value": {
          "light": "#2b1442",
          "dark": "#fbefff"
        },
        "usage": "Chart and sidebar colors (shadcn/ui)."
      },
      {
        "name": "sidebar-border",
        "value": {
          "light": "#ecd5f5",
          "dark": "#3a2858"
        },
        "usage": "Chart and sidebar colors (shadcn/ui)."
      },
      {
        "name": "sidebar-ring",
        "value": {
          "light": "#7c2df0",
          "dark": "#c69bff"
        },
        "usage": "Chart and sidebar colors (shadcn/ui)."
      },
      {
        "name": "surface",
        "value": {
          "light": "#fdeef8",
          "dark": "#160c25"
        },
        "usage": "Raised or sunken sections of a page."
      },
      {
        "name": "success",
        "value": {
          "light": "#11803b",
          "dark": "#5fe3a1"
        },
        "usage": "Success states."
      },
      {
        "name": "success-foreground",
        "value": {
          "light": "#ffffff",
          "dark": "#0b2a1a"
        },
        "usage": "Text on success."
      },
      {
        "name": "warning",
        "value": {
          "light": "#ffc72c",
          "dark": "#ffd85e"
        },
        "usage": "Warning states."
      },
      {
        "name": "warning-foreground",
        "value": {
          "light": "#2b1442",
          "dark": "#2b1d00"
        },
        "usage": "Text on warning."
      },
      {
        "name": "info",
        "value": {
          "light": "#0b72ad",
          "dark": "#5fd0ff"
        },
        "usage": "Informational states."
      },
      {
        "name": "info-foreground",
        "value": {
          "light": "#ffffff",
          "dark": "#04263a"
        },
        "usage": "Text on info."
      },
      {
        "name": "brand",
        "value": {
          "light": "#ff4fa3",
          "dark": "#ff7cbd"
        },
        "usage": "Brand color: gradients, highlights, illustrations."
      },
      {
        "name": "brand-2",
        "value": {
          "light": "#7c2df0",
          "dark": "#c69bff"
        },
        "usage": "Second brand color, paired with brand in gradients."
      }
    ]
  },
  "type": {
    "families": {
      "sans": "\"Nunito\", ui-sans-serif, system-ui, sans-serif",
      "display": "\"Fredoka\", ui-sans-serif, system-ui, sans-serif",
      "serif": "\"Young Serif\", ui-serif, Georgia, serif",
      "mono": "\"DM Mono\", ui-monospace, SFMono-Regular, Menlo, monospace"
    },
    "groups": [
      {
        "name": "Display",
        "family": "display",
        "styles": [
          {
            "name": "display",
            "fontSize": "5rem",
            "lineHeight": "1.02",
            "fontWeight": 700,
            "letterSpacing": "-0.035em"
          },
          {
            "name": "h1",
            "fontSize": "3.5rem",
            "lineHeight": "1.08",
            "fontWeight": 700,
            "letterSpacing": "-0.03em"
          },
          {
            "name": "h2",
            "fontSize": "2.5rem",
            "lineHeight": "1.15",
            "fontWeight": 650,
            "letterSpacing": "-0.02em"
          }
        ]
      },
      {
        "name": "Text",
        "family": "sans",
        "styles": [
          {
            "name": "h3",
            "fontSize": "1.75rem",
            "lineHeight": "1.25",
            "fontWeight": 600,
            "letterSpacing": "-0.015em"
          },
          {
            "name": "h4",
            "fontSize": "1.125rem",
            "lineHeight": "1.4",
            "fontWeight": 600,
            "letterSpacing": "-0.01em"
          },
          {
            "name": "lead",
            "fontSize": "1.25rem",
            "lineHeight": "1.6",
            "fontWeight": 400,
            "letterSpacing": "0em"
          },
          {
            "name": "body",
            "fontSize": "1rem",
            "lineHeight": "1.6",
            "fontWeight": 400,
            "letterSpacing": "0em"
          },
          {
            "name": "small",
            "fontSize": "0.875rem",
            "lineHeight": "1.5",
            "fontWeight": 400,
            "letterSpacing": "0em"
          },
          {
            "name": "caption",
            "fontSize": "0.75rem",
            "lineHeight": "1.4",
            "fontWeight": 500,
            "letterSpacing": "0.01em"
          }
        ]
      },
      {
        "name": "Code",
        "family": "mono",
        "styles": [
          {
            "name": "overline",
            "fontSize": "0.75rem",
            "lineHeight": "1.3",
            "fontWeight": 500,
            "letterSpacing": "0.12em"
          },
          {
            "name": "code",
            "fontSize": "0.875rem",
            "lineHeight": "1.5",
            "fontWeight": 400,
            "letterSpacing": "0em"
          }
        ]
      }
    ]
  },
  "spacing": {
    "tokens": [
      {
        "name": "space-0",
        "value": "0px",
        "usage": "Reset."
      },
      {
        "name": "space-0-5",
        "value": "0.125rem",
        "usage": "Icon nudges."
      },
      {
        "name": "space-1",
        "value": "0.25rem",
        "usage": "Tight gaps inside badges."
      },
      {
        "name": "space-1-5",
        "value": "0.375rem",
        "usage": "Icon-to-label gap."
      },
      {
        "name": "space-2",
        "value": "0.5rem",
        "usage": "Gap between inline controls."
      },
      {
        "name": "space-3",
        "value": "0.75rem",
        "usage": "Input padding, small stacks."
      },
      {
        "name": "space-4",
        "value": "1rem",
        "usage": "Default gap and mobile gutter."
      },
      {
        "name": "space-5",
        "value": "1.25rem",
        "usage": "Compact card padding."
      },
      {
        "name": "space-6",
        "value": "1.5rem",
        "usage": "Card padding."
      },
      {
        "name": "space-8",
        "value": "2rem",
        "usage": "Gap between related sections."
      },
      {
        "name": "space-10",
        "value": "2.5rem",
        "usage": "Desktop gutter."
      },
      {
        "name": "space-12",
        "value": "3rem",
        "usage": "Section padding (mobile)."
      },
      {
        "name": "space-16",
        "value": "4rem",
        "usage": "Section padding."
      },
      {
        "name": "space-20",
        "value": "5rem",
        "usage": "Large section padding."
      },
      {
        "name": "space-24",
        "value": "6rem",
        "usage": "Hero padding."
      },
      {
        "name": "space-32",
        "value": "8rem",
        "usage": "Landing page rhythm."
      }
    ]
  },
  "radius": {
    "tokens": [
      {
        "name": "radius-sm",
        "value": "14.4px",
        "usage": "Badges, small buttons."
      },
      {
        "name": "radius-md",
        "value": "19.2px",
        "usage": "Buttons, inputs."
      },
      {
        "name": "radius-lg",
        "value": "24px",
        "usage": "Cards, popovers."
      },
      {
        "name": "radius-xl",
        "value": "33.6px",
        "usage": "Large cards, dialogs."
      }
    ]
  },
  "shadow": {
    "tokens": [
      {
        "name": "shadow-xs",
        "value": "0 1px 2px rgb(0 0 0 / 0.05)",
        "usage": "Inputs, subtle lift."
      },
      {
        "name": "shadow-sm",
        "value": "0 1px 3px rgb(0 0 0 / 0.08), 0 1px 2px rgb(0 0 0 / 0.04)",
        "usage": "Buttons, cards at rest."
      },
      {
        "name": "shadow-md",
        "value": "0 6px 16px -4px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.06)",
        "usage": "Hovered cards, dropdowns."
      },
      {
        "name": "shadow-lg",
        "value": "0 14px 32px -8px rgb(0 0 0 / 0.14), 0 4px 8px -4px rgb(0 0 0 / 0.06)",
        "usage": "Popovers, sticky headers."
      },
      {
        "name": "shadow-xl",
        "value": "0 28px 60px -12px rgb(0 0 0 / 0.22)",
        "usage": "Dialogs, drawers."
      }
    ]
  },
  "breakpoint": {
    "tokens": [
      {
        "name": "bp-xs",
        "value": "30rem",
        "usage": "480px — large phones."
      },
      {
        "name": "bp-sm",
        "value": "40rem",
        "usage": "640px — phablets, small tablets."
      },
      {
        "name": "bp-md",
        "value": "48rem",
        "usage": "768px — tablets portrait."
      },
      {
        "name": "bp-lg",
        "value": "64rem",
        "usage": "1024px — tablets landscape, laptops."
      },
      {
        "name": "bp-xl",
        "value": "80rem",
        "usage": "1280px — desktops."
      },
      {
        "name": "bp-2xl",
        "value": "96rem",
        "usage": "1536px — wide desktops."
      }
    ]
  }
}