{
  "name": "Lagoon",
  "version": 1,
  "meta": {
    "source": "wallflower-ui",
    "preset": "lagoon",
    "fonts": {
      "sans": "Manrope",
      "display": "Sora",
      "serif": "Newsreader",
      "mono": "JetBrains Mono"
    }
  },
  "color": {
    "themes": [
      {
        "id": "light",
        "name": "Light"
      },
      {
        "id": "dark",
        "name": "Dark"
      }
    ],
    "tokens": [
      {
        "name": "background",
        "value": {
          "light": "#ffffff",
          "dark": "#141619"
        },
        "usage": "Page background."
      },
      {
        "name": "foreground",
        "value": {
          "light": "#141619",
          "dark": "#f6f7f8"
        },
        "usage": "Body text on background."
      },
      {
        "name": "card",
        "value": {
          "light": "#ffffff",
          "dark": "#292b30"
        },
        "usage": "Card and panel surface."
      },
      {
        "name": "card-foreground",
        "value": {
          "light": "#141619",
          "dark": "#f6f7f8"
        },
        "usage": "Text on card."
      },
      {
        "name": "popover",
        "value": {
          "light": "#ffffff",
          "dark": "#292b30"
        },
        "usage": "Menus, popovers, tooltips."
      },
      {
        "name": "popover-foreground",
        "value": {
          "light": "#141619",
          "dark": "#f6f7f8"
        },
        "usage": "Text on popover."
      },
      {
        "name": "primary",
        "value": {
          "light": "#005f5f",
          "dark": "#23bbbb"
        },
        "usage": "Primary buttons and key actions."
      },
      {
        "name": "primary-foreground",
        "value": {
          "light": "#ffffff",
          "dark": "#001b1b"
        },
        "usage": "Text and icons on primary."
      },
      {
        "name": "secondary",
        "value": {
          "light": "#ebedf0",
          "dark": "#3c4047"
        },
        "usage": "Secondary buttons, subtle fills."
      },
      {
        "name": "secondary-foreground",
        "value": {
          "light": "#292b30",
          "dark": "#f6f7f8"
        },
        "usage": "Text on secondary."
      },
      {
        "name": "muted",
        "value": {
          "light": "#ebedf0",
          "dark": "#3c4047"
        },
        "usage": "Muted fills: skeletons, code, table stripes."
      },
      {
        "name": "muted-foreground",
        "value": {
          "light": "#646974",
          "dark": "#c0c4cd"
        },
        "usage": "Secondary text on background or muted."
      },
      {
        "name": "accent",
        "value": {
          "light": "#d6f4f3",
          "dark": "#3c4047"
        },
        "usage": "Hover and selected fills for menu items."
      },
      {
        "name": "accent-foreground",
        "value": {
          "light": "#003333",
          "dark": "#f6f7f8"
        },
        "usage": "Text on accent."
      },
      {
        "name": "destructive",
        "value": {
          "light": "#c21b0d",
          "dark": "#ff735f"
        },
        "usage": "Destructive actions and errors."
      },
      {
        "name": "destructive-foreground",
        "value": {
          "light": "#ffffff",
          "dark": "#320100"
        },
        "usage": "Text on destructive."
      },
      {
        "name": "border",
        "value": {
          "light": "#dadce2",
          "dark": "#3c4047"
        },
        "usage": "Dividers and card borders."
      },
      {
        "name": "input",
        "value": {
          "light": "#848994",
          "dark": "#646974"
        },
        "usage": "Form control borders (3:1 on background)."
      },
      {
        "name": "ring",
        "value": {
          "light": "#009d9d",
          "dark": "#23bbbb"
        },
        "usage": "Focus rings."
      },
      {
        "name": "chart-1",
        "value": {
          "light": "#009d9d",
          "dark": "#23bbbb"
        },
        "usage": "Chart and sidebar colors (shadcn/ui)."
      },
      {
        "name": "chart-2",
        "value": {
          "light": "#008ee9",
          "dark": "#49abff"
        },
        "usage": "Chart and sidebar colors (shadcn/ui)."
      },
      {
        "name": "chart-3",
        "value": {
          "light": "#009d9d",
          "dark": "#23bbbb"
        },
        "usage": "Chart and sidebar colors (shadcn/ui)."
      },
      {
        "name": "chart-4",
        "value": {
          "light": "#2fa24d",
          "dark": "#5dbd6f"
        },
        "usage": "Chart and sidebar colors (shadcn/ui)."
      },
      {
        "name": "chart-5",
        "value": {
          "light": "#e28f17",
          "dark": "#f7b56b"
        },
        "usage": "Chart and sidebar colors (shadcn/ui)."
      },
      {
        "name": "sidebar",
        "value": {
          "light": "#f6f7f8",
          "dark": "#292b30"
        },
        "usage": "Chart and sidebar colors (shadcn/ui)."
      },
      {
        "name": "sidebar-foreground",
        "value": {
          "light": "#141619",
          "dark": "#f6f7f8"
        },
        "usage": "Chart and sidebar colors (shadcn/ui)."
      },
      {
        "name": "sidebar-primary",
        "value": {
          "light": "#005f5f",
          "dark": "#23bbbb"
        },
        "usage": "Chart and sidebar colors (shadcn/ui)."
      },
      {
        "name": "sidebar-primary-foreground",
        "value": {
          "light": "#ffffff",
          "dark": "#001b1b"
        },
        "usage": "Chart and sidebar colors (shadcn/ui)."
      },
      {
        "name": "sidebar-accent",
        "value": {
          "light": "#ebedf0",
          "dark": "#3c4047"
        },
        "usage": "Chart and sidebar colors (shadcn/ui)."
      },
      {
        "name": "sidebar-accent-foreground",
        "value": {
          "light": "#292b30",
          "dark": "#f6f7f8"
        },
        "usage": "Chart and sidebar colors (shadcn/ui)."
      },
      {
        "name": "sidebar-border",
        "value": {
          "light": "#dadce2",
          "dark": "#3c4047"
        },
        "usage": "Chart and sidebar colors (shadcn/ui)."
      },
      {
        "name": "sidebar-ring",
        "value": {
          "light": "#009d9d",
          "dark": "#23bbbb"
        },
        "usage": "Chart and sidebar colors (shadcn/ui)."
      },
      {
        "name": "surface",
        "value": {
          "light": "#f6f7f8",
          "dark": "#292b30"
        },
        "usage": "Raised or sunken sections of a page."
      },
      {
        "name": "success",
        "value": {
          "light": "#007f30",
          "dark": "#5dbd6f"
        },
        "usage": "Success states."
      },
      {
        "name": "success-foreground",
        "value": {
          "light": "#ffffff",
          "dark": "#001d05"
        },
        "usage": "Text on success."
      },
      {
        "name": "warning",
        "value": {
          "light": "#e28f17",
          "dark": "#f7b56b"
        },
        "usage": "Warning states."
      },
      {
        "name": "warning-foreground",
        "value": {
          "light": "#231100",
          "dark": "#231100"
        },
        "usage": "Text on warning."
      },
      {
        "name": "info",
        "value": {
          "light": "#006cb5",
          "dark": "#49abff"
        },
        "usage": "Informational states."
      },
      {
        "name": "info-foreground",
        "value": {
          "light": "#ffffff",
          "dark": "#00172d"
        },
        "usage": "Text on info."
      },
      {
        "name": "brand",
        "value": {
          "light": "#009d9d",
          "dark": "#23bbbb"
        },
        "usage": "Brand color: gradients, highlights, illustrations."
      },
      {
        "name": "brand-2",
        "value": {
          "light": "#008ee9",
          "dark": "#49abff"
        },
        "usage": "Second brand color, paired with brand in gradients."
      }
    ]
  },
  "type": {
    "families": {
      "sans": "\"Manrope\", ui-sans-serif, system-ui, sans-serif",
      "display": "\"Sora\", ui-sans-serif, system-ui, sans-serif",
      "serif": "\"Newsreader\", ui-serif, Georgia, serif",
      "mono": "\"JetBrains 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": "6px",
        "usage": "Badges, small buttons."
      },
      {
        "name": "radius-md",
        "value": "8px",
        "usage": "Buttons, inputs."
      },
      {
        "name": "radius-lg",
        "value": "10px",
        "usage": "Cards, popovers."
      },
      {
        "name": "radius-xl",
        "value": "14px",
        "usage": "Large cards, dialogs."
      }
    ]
  },
  "shadow": {
    "tokens": [
      {
        "name": "shadow-xs",
        "value": "0 0 0 1px rgb(0 0 0 / 0.05)",
        "usage": "Inputs, subtle lift."
      },
      {
        "name": "shadow-sm",
        "value": "0 0 0 1px rgb(0 0 0 / 0.06), 0 1px 2px rgb(0 0 0 / 0.08)",
        "usage": "Buttons, cards at rest."
      },
      {
        "name": "shadow-md",
        "value": "0 0 0 1px rgb(0 0 0 / 0.06), 0 4px 8px -2px rgb(0 0 0 / 0.12)",
        "usage": "Hovered cards, dropdowns."
      },
      {
        "name": "shadow-lg",
        "value": "0 0 0 1px rgb(0 0 0 / 0.06), 0 12px 24px -6px rgb(0 0 0 / 0.16)",
        "usage": "Popovers, sticky headers."
      },
      {
        "name": "shadow-xl",
        "value": "0 0 0 1px rgb(0 0 0 / 0.06), 0 24px 48px -12px rgb(0 0 0 / 0.24)",
        "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."
      }
    ]
  }
}