version: "1.0"
name: "Neumorphism"

colors:
  background: "#E0E5EC"
  surface: "#E0E5EC"
  text-primary: "#2D3748"
  text-secondary: "#718096"
  border: "none"
  accent-1: "#5A67D8"
  accent-2: "#8B5CF6"
  accent-3: "#FFFFFF"
  shadow: "#A3B1C6 / #FFFFFF"

typography:
  headline-lg:
    family: "Inter"
    weight: 700
    size: "48px"
    line-height: "1.08"
    letter-spacing: "-0.03em"
  headline-sm:
    family: "Inter"
    weight: 700
    size: "24px"
    line-height: "1.25"
  body-md:
    family: "Inter"
    weight: 400
    size: "16px"
    line-height: "1.6"
  label-md:
    family: "Inter"
    weight: 600
    size: "13px"
    text-transform: "uppercase"
    letter-spacing: "0.05em"

rounded:
  sm: "12px"
  md: "22px"
  lg: "28px"

spacing:
  xs: "8px"
  sm: "16px"
  md: "24px"
  lg: "40px"

border-width:
  sm: "0px"
  md: "0px"
  lg: "0px"

components:
  button-primary:
    background: "#E0E5EC"
    color: "#5A67D8"
    border: "none"
    border-radius: "16px"
    box-shadow: "6px 6px 12px #A3B1C6, -6px -6px 12px #FFFFFF"
    padding: "12px 20px"

  surface-card:
    background: "#E0E5EC"
    border-radius: "22px"
    box-shadow: "9px 9px 18px #A3B1C6, -9px -9px 18px #FFFFFF"
    padding: "24px"

rationale:
  - Keep the background and the components tonally close so the relief effect remains believable.
  - Use accents sparingly; too many saturated colors break the single-material illusion.