{
  "$schema": "https://design-tokens.github.io/community-group/format/",
  "$description": "Venuo marketing website design tokens (W3C Design Tokens format). Single canonical source — src/styles/tokens.css implements these as CSS custom properties. When handing assets to a design tool (e.g. Claude Design), paste this file and instruct: 'Use only tokens from this file. Do not invent colors.' Note: the website palette intentionally differs from the Venuo app (warm paper vs neutral).",
  "color": {
    "paper": {
      "2": {
        "$value": "#F5F6F8",
        "$type": "color",
        "$description": "Sidebar, elevated card fill"
      },
      "3": {
        "$value": "#EDEFF3",
        "$type": "color",
        "$description": "Hover fill, deep contrast"
      },
      "base": {
        "$value": "#FCFCFD",
        "$type": "color",
        "$description": "Page background — cool near-white"
      }
    },
    "ink": {
      "25": {
        "$value": "#FAFBFC",
        "$type": "color",
        "$description": "Whisper background"
      },
      "50": {
        "$value": "#F6F7F9",
        "$type": "color",
        "$description": "Item hover background"
      },
      "100": {
        "$value": "#EEF0F3",
        "$type": "color",
        "$description": "Subtle fill, skeleton"
      },
      "150": {
        "$value": "#E4E7EC",
        "$type": "color",
        "$description": "Default border / divider"
      },
      "200": {
        "$value": "#D5D9E1",
        "$type": "color",
        "$description": "Hairline border"
      },
      "300": {
        "$value": "#B0B7C5",
        "$type": "color",
        "$description": "Tertiary, disabled"
      },
      "400": {
        "$value": "#838C9F",
        "$type": "color",
        "$description": "Meta, placeholder, kicker"
      },
      "450": {
        "$value": "#6E788B",
        "$type": "color",
        "$description": "Legacy mid-stop (SeoCampaignLayout)"
      },
      "500": {
        "$value": "#5A6478",
        "$type": "color",
        "$description": "Secondary text, captions"
      },
      "600": {
        "$value": "#3A4256",
        "$type": "color",
        "$description": "Sub-labels, UI text"
      },
      "700": {
        "$value": "#262C3D",
        "$type": "color",
        "$description": "Body prose"
      },
      "800": {
        "$value": "#1B2030",
        "$type": "color",
        "$description": "Dark fill (code blocks)"
      },
      "900": {
        "$value": "#131722",
        "$type": "color",
        "$description": "Primary text — headings, nav"
      }
    },
    "blue": {
      "50": {
        "$value": "#F2F5FF",
        "$type": "color",
        "$description": "Lightest interaction layer"
      },
      "100": {
        "$value": "#E6ECFF",
        "$type": "color",
        "$description": "Active / selected background"
      },
      "400": {
        "$value": "#5A82FF",
        "$type": "color",
        "$description": "Hover state"
      },
      "500": {
        "$value": "#2A5BFF",
        "$type": "color",
        "$description": "Brand accent — links, buttons, focus ring. <5% of layout"
      },
      "600": {
        "$value": "#1E47D9",
        "$type": "color",
        "$description": "Pressed state, link hover"
      }
    },
    "green": {
      "100": {
        "$value": "#DEF4E9",
        "$type": "color",
        "$description": "Success background"
      },
      "500": {
        "$value": "#15A572",
        "$type": "color",
        "$description": "Success icon, live dot"
      },
      "600": {
        "$value": "#0F8A5F",
        "$type": "color",
        "$description": "Success text"
      }
    },
    "amber": {
      "100": {
        "$value": "#FBEBC9",
        "$type": "color",
        "$description": "Warning background"
      },
      "500": {
        "$value": "#D88A1A",
        "$type": "color",
        "$description": "Warning icon"
      },
      "600": {
        "$value": "#B36A00",
        "$type": "color",
        "$description": "Warning text"
      }
    },
    "red": {
      "100": {
        "$value": "#FBE2E0",
        "$type": "color",
        "$description": "Error background"
      },
      "500": {
        "$value": "#E04A40",
        "$type": "color",
        "$description": "Error icon"
      },
      "600": {
        "$value": "#C8362E",
        "$type": "color",
        "$description": "Error text"
      }
    }
  },
  "font": {
    "sans": {
      "$value": "DM Sans",
      "$type": "fontFamily",
      "$description": "Body, headings, UI — everything by default. Weights 400/500/600/700. Features ss01 + cv11, antialiased. Italic for emphasis."
    },
    "mono": {
      "$value": "JetBrains Mono",
      "$type": "fontFamily",
      "$description": "BRAND IDENTITY FONT — all time/date/label/kicker/pill contexts. Never substitute. Weights 400/500."
    }
  },
  "radius": {
    "sm": {
      "$value": "4px",
      "$type": "dimension",
      "$description": "Inline code, kbd"
    },
    "base": {
      "$value": "6px",
      "$type": "dimension",
      "$description": "Buttons, inputs, small cards"
    },
    "lg": {
      "$value": "10px",
      "$type": "dimension",
      "$description": "Cards, callouts, code blocks"
    },
    "xl": {
      "$value": "14px",
      "$type": "dimension",
      "$description": "Large cards, sidebars, sheets"
    },
    "pill": {
      "$value": "999px",
      "$type": "dimension",
      "$description": "Badges, tags, plan chips"
    }
  },
  "shadow": {
    "1": {
      "$value": [
        {
          "offsetX": "0",
          "offsetY": "1px",
          "blur": "2px",
          "spread": "0",
          "color": "rgba(19,23,34,0.04)"
        }
      ],
      "$type": "shadow",
      "$description": "Tight lift — buttons, inputs"
    },
    "2": {
      "$value": [
        {
          "offsetX": "0",
          "offsetY": "8px",
          "blur": "24px",
          "spread": "-8px",
          "color": "rgba(19,23,34,0.10)"
        },
        {
          "offsetX": "0",
          "offsetY": "2px",
          "blur": "4px",
          "spread": "0",
          "color": "rgba(19,23,34,0.04)"
        }
      ],
      "$type": "shadow",
      "$description": "Card hover, dropdown"
    },
    "3": {
      "$value": [
        {
          "offsetX": "0",
          "offsetY": "24px",
          "blur": "48px",
          "spread": "-16px",
          "color": "rgba(19,23,34,0.18)"
        },
        {
          "offsetX": "0",
          "offsetY": "4px",
          "blur": "8px",
          "spread": "0",
          "color": "rgba(19,23,34,0.05)"
        }
      ],
      "$type": "shadow",
      "$description": "Modal, popover"
    },
    "4": {
      "$value": [
        {
          "offsetX": "0",
          "offsetY": "40px",
          "blur": "80px",
          "spread": "-24px",
          "color": "rgba(19,23,34,0.30)"
        },
        {
          "offsetX": "0",
          "offsetY": "8px",
          "blur": "16px",
          "spread": "0",
          "color": "rgba(19,23,34,0.08)"
        }
      ],
      "$type": "shadow",
      "$description": "Mobile drawer, heavy overlay"
    }
  },
  "motion": {
    "duration": {
      "1": {
        "$value": "80ms",
        "$type": "duration",
        "$description": "Instant feedback — color, opacity"
      },
      "2": {
        "$value": "120ms",
        "$type": "duration",
        "$description": "Standard transition — hover, focus"
      },
      "3": {
        "$value": "200ms",
        "$type": "duration",
        "$description": "Deliberate — expand, slide"
      },
      "4": {
        "$value": "320ms",
        "$type": "duration",
        "$description": "Large movement — drawer, page element"
      }
    },
    "easing": {
      "out": {
        "$value": {
          "$type": "cubicBezier",
          "value": [
            0.2,
            0.8,
            0.2,
            1
          ]
        },
        "$type": "cubicBezier",
        "$description": "Default easing for all transitions"
      },
      "spring": {
        "$value": {
          "$type": "cubicBezier",
          "value": [
            0.34,
            1.36,
            0.64,
            1
          ]
        },
        "$type": "cubicBezier",
        "$description": "Playful overshoot — toggles, micro-interactions"
      }
    }
  },
  "layout": {
    "max-width": {
      "$value": "1240px",
      "$type": "dimension",
      "$description": "Page container max-width — site-wide, no exceptions"
    },
    "padding-desktop": {
      "$value": "56px",
      "$type": "dimension",
      "$description": "Horizontal page padding ≥821px"
    },
    "padding-mobile": {
      "$value": "24px",
      "$type": "dimension",
      "$description": "Horizontal page padding ≤820px"
    }
  }
}